Adding Fly-In Animations To Divi

Here’s a quick guide to adding fly-in animations to Divi.

It’s pretty simple and you can add the CSS class(es) to any section, row or module.

Basically, it relies on using Divi’s already-existing animation classes.

Out of the box, only certain Divi modules have the nice user friendly drop-down which allows items to be animated in.

However, there are two key classes that can be used from their CSS, to trigger animation as the user scrolls down to where they are placed.

1. First you need to add the class et-waypoint to the item you’d like to animate in. This will both hide the item and tell Divi that it will do something when it comes into view.
2. The second class is the actual animation you’d like to use. These are a bit self explanatory – see the list below:
   • et_pb_animation_fade_in
   • et_pb_animation_bottom
   • et_pb_animation_top
   • et_pb_animation_right
   • et_pb_animation_left

Note that these will basically “hide” the element(s) off-screen until they enter the bottom of the viewport. At which point, they will become visible and animate in as the user scrolls down.

(Learn more about that here: www.sean-barton.co.uk/2016/04/divi-animate-normal-content-images.)

If you’d like to ALSO be able to animate as the user scrolls back up the page, you will need to add additional JavaScript to the template. You can grab that here: quiroz.co/adding-fly-in-animations-to-any-divi-module.