Divi Hacks Plugin
Examples & DocumentationAnimations
These classes will animate any section, row, column, or module when the page loads. There are also some classes for animating on hover.
Animation classes
- animate-bounce
- animate-flash
- animate-pulse
- animate-rubberBand
- animate-shake
- animate-headShake
- animate-swing
- animate-tada
- animate-wobble
- animate-jello
- animate-bounceIn
- animate-bounceInDown
- animate-bounceInLeft
- animate-bounceInRight
- animate-bounceInUp
- animate-lightSpeedIn
- animate-hinge
- animate-jackInTheBox
- hover-rubberBand
- hover-pulse
- hover-tada
- hover-grow
- hover-bounce
- hover-swing
- hover-wobble
- hover-shake
- hover-headshake
- hover-jello
- hover-flash
Additional Classes
- infinite
Add this class to keep the animation looping continuously. See an example of this in the bounce animation below.
Usage
Add any of the classes to Any Section, Row, or Module Settings > Advanced tab > CSS ID & Classes > CSS Class.
Use with
Any Section, Row, or Module
Design
Nothing to configure here.
Examples
Click on any button to see the animation in the photo below. You can see an example of using the infinite class to keep the animation loop continuously in the bounce animation. Below that are hover animations.
- rubberBand
- bounce
- flash
- shake
- pulse
- jello
- wobble
- headShake
- swing
- tada
- bounceIn
- bounceInDown
- bounceInUp
- bounceInLeft
- bounceInRight
- lightSpeedIn
- jackInTheBox
animate-rubberBand
animate-bounce infinite
animate-flash
animate-shake
animate-pulse
animate-jello
animate-wobble
animate-headShake
animate-swing
animate-tada
animate-bounceIn
animate-bounceInDown
animate-bounceInUp
animate-bounceInLeft
animate-bounceInRight
animate-lightSpeedIn
animate-jackInTheBox