- One 40% 40%
- Two 28% 28%
- Three 76% 76%
And then, while you don’t need to add anything to your blurb modules (in order to get the icon animation), you simply have to add the Css Class “et_waypoint” in the modules or sections you want to animate.
However, you may want the new animations to be triggered both scrolling down and up, but maintening the default behaviour for the blurb icons: that is be animated when scrolling the first time only. To get this result you simply have to delete ‘et-animated‘ from the classes added and removed in the jQuery code above (see lines 20 and 22). Now the both scrolling effect will only target our new animations, while the blurb icon will be animated once.
Finally, you could want the Blurb icon doesn’t have animation at all. In order to do this you simply have to change the class “et-waypoint” in our jQuery code (line 4) and also in the Custom Css Class of the modules with new animations that you want to trigger both scrolling down and up.
So we already are at the end of today’s post. Hope it can be a useful trick to get the wished result, closing with the raccomandtion of not abuse of animations in your layouts and designs. The Animation and the Divi Animation overall can be really a great design element but you always have to question yourself: is this animation really needed? If the answer is “No” or “Maybe not” we suggest you to leave out the idea of adding the animation. See you next post!