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.
- First you need to add the class
et-waypointto 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.
- The second class is the actual animation you’d like to use. These are a bit self explanatory – see the list below:
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.)