Divi Guide: How To Animate Anything On Your Site

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:

et-waypoint

and

et_pb_animation_left

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!

Pin It on Pinterest