One of the questions I get asked most often by other members of the Divi community, is how in the heck did I pull off the snazzy animations on page elements everywhere on this site? The answer is actually quite simple, and build into Divi already. No plugins, and no coding!
How It Works
Since Divi has options to animate certain elements, like images, via module options, it obviously has functions to animate those elements that we can apply. The good news is that the animations are accomplished via CSS, so all we need to do is apply some styles to the elements we want to animate. Here’s a peek at the styles on a row on our home page.
The important bits here are as follows:
We need the class “et-waypoint” because it tells the browser not to animate the element until the user scrolls to it. For elements higher on the page, the animations fire off right as the page loads.
The class “et_pb_animation_left” tells the browser which animation we’re using from the Divi stylesheet. The acceptable values are:
et_pb_animation_left et_pb_animation_right et_pb_animation_bottom et_pb_animation_top et_pb_animation_fade_in
So, to summarize, to animate elements on a page, apply the “et-waypoint” style first, followed by the “et_pb_animation_(direction)” style.
It’s certainly a very basic level of animation, and you can accomplish even more by including something like Animate.css in your project, which works largely the same way.
Some Final Words
Experiment with different combinations and find some really slick looking animations! Was this guide helpful? Are you having trouble? Did you make something awesome with this? Share it in the comments below!