While Divi animations are included in modules such as images, blurbs, and sliders, other sections, rows, and modules does not have them in their design panel. Thankfully, Divi has built in these animations in its stylesheet, so users can easily add a fade-in or fly-in from the top, bottom, left, and right to any elements on the website.
This post will cover the following:
- how to add in these animation codes/classes, and in addition,
- how to add other animations with animate.css on Divi and other websites,
- enable animate.css animations on scroll with wow.js
- enable Divi animations on mobile,
- and enable animations for both the up and down scroll.
Why Use Animations
Web animations, when used appropriately, can create a visually engaging experience for users. This can come in the form of fly-in/fade-in animation when an object enters into view, or movement/micro-interactions when a user hovers or clicks on a particular object. The former encourages users to look at it, while the latter being useful in indicating that the object could be clicked on.
Web animations, when used appropriately, can encourage a user to look at it, or to indicate that an object can be interacted with.
Add Divi Animations to Any Elements
Since Divi has already included animations in its stylesheet, simply add the corresponding classes to any element in the CSS Class box in the Advanced Tab.
The classes are:
- et_pb_animation_top et-animated et-waypoint
- et_pb_animation_bottom et-animated et-waypoint
- et_pb_animation_right et-animated et-waypoint
- et_pb_animation_left et-animated et-waypoint
- et_pb_animation_fade_in et-animated et-waypoint
Latest posts by Hou Teng (see all)
- SEO Basics: Disavow Links with Google’s Link Disavow Tool - October 12, 2017
- Preparing Social Media Images with Canva - September 25, 2017
- How to Optimise Images for Search Engine Optimisation - September 25, 2017