Currently Divi contains 18 animations. In CSS parlance these are called keyframes. These are defined in Divi’s style.css file. We’ve compiled a complete list here.

Divi provides options to animate certain features like images and menu subitems, but with a bit of creativity, any of these can be applied to virtually any section, row or module.

These animations are divided into two main categories:

  1. Animations activated when elements become visible.
  2. Animations activated when elements disappear.

To view all of these in actions, visit our Divi’s 18 Built In Animations Demo page.

Simple On-Appearance Divi Animations

The first five Divi animations can be used simply by assigning CSS classes to sections, rows or modules. They are:

  1. Fade In
  2. Fade Left
  3. Fade Right
  4. Fade Top
  5. Fade Bottom

All you do is input the appropriate values to the section, row or module’s CSS class field.

Here are the values that correspond to the above animations:

  1. et-waypoint et_pb_animation_fade_in
  2. et-waypoint et_pb_animation_fade_left
  3. et-waypoint et_pb_animation_fade_right
  4. et-waypoint et_pb_animation_fade_top
  5. et-waypoint et_pb_animation_fade_bottom

For example, you might have noticed that this section moved up from the bottom when it became visible. Here is a snapshot of the section’s Advanced Settings Tab,

Image showing Divi section advanced settings tab

I discovered this process in Sean Barton’s excellent article on this topic.

But I recalled seeing many other keyframes in Divi’s stylesheet. Investigating those led to some experimentation. From that, I developed the information below.

On-Appearance Divi Animations Requiring CSS Code

If you are willing to invest a bit of effort, there are nine more animations available.

  1. Fade In Top
  2. Fade In Bottom
  3. Fade In Left
  4. Fade In Right
  5. Flip In X
  6. Flip In Y
  7. Grid Fade In
  8. Grow
  9. SlideWidth

The Fade In animations are similar to the Top, Bottom, Left and Right animations above, except that the element travels further.

You can see them all in action on the demo page.

The demo page has the code that you’ll need for to apply each animation to a section, row or module. There are two steps.

  1. Add the values shown to the object’s CSS Class field.
  2. Add the CSS Code to your child theme’s style.css file, or to the Additional CSS in the Theme Customizer, or the page’s Divi Custom CSS field.

For example, you might have noticed that this row slid in from the left when it became visible. Here is a snapshot of the row’s Advanced Settings Tab,

Image showing Divi row module advanced settings tab

In addition, we added CSS Code to our child theme’s style.css file.

.trg_fadeinleft.et-animated {
  opacity: 1;
  -webkit-animation: fadeInLeft 1s 1 cubic-bezier(0.77, 0, 0.175, 1);
  -moz-animation: fadeInLeft 1s 1 cubic-bezier(0.77, 0, 0.175, 1);
  -o-animation: fadeInLeft 1s 1 cubic-bezier(0.77, 0, 0.175, 1);
  animation: fadeInLeft 1s 1 cubic-bezier(0.77, 0, 0.175, 1);
}

On-Disappearance Divi Animations

This group of animations is used to provide a smooth transition when a user closes a module. For example, Divi uses the Fade Out Left animation when a the search form is closed.

  1. Fade Out Top
  2. Fade Out Bottom
  3. Fade Out Left
  4. Fade Out Right

You can see them all in action on the demo page.

While real-world application of these animations would utilize jQuery or JavaScript to capture a click and assign a class to the element, our demonstration uses the active CSS pseudo-class (which is active while the user holds down the mouse button on an element).

If you wish to use the method shown in our demo, you will need to follow the same two steps:

  1. Add the values shown to the object’s CSS Class field.
  2. Add the CSS Code to your child theme’s style.css file, or to the Additional CSS in the Theme Customizer, or the page’s Divi Custom CSS field.

For example, the View Demo button in this section has the Fade Out Bottom animation assigned. The animation appears from the time the button is click until the mouse button is released. To get a good view, hold down the mouse button for a second or two before releasing. (I admit, this is a poor use of the animation.)

Here is a snapshot of the Button Module’s Advanced Settings:

Image showing Divi Button Module's Advanced Settings

In addition, we added CSS Code to our child theme’s style.css file.

.trg_fadeoutbottom:active {
  opacity: 0;
  -webkit-animation: fadeOutBottom 1s 1 cubic-bezier(0.77, 0, 0.175, 1);
  -moz-animation: fadeOutBottom 1s 1 cubic-bezier(0.77, 0, 0.175, 1);
  -o-animation: fadeOutBottom 1s 1 cubic-bezier(0.77, 0, 0.175, 1);
  animation: fadeOutBottom 1s 1 cubic-bezier(0.77, 0, 0.175, 1);
}

 

Summary

If you want to add all of the animations to your CSS, here is the combined code. Then you merely have to assign the classes to your Divi modules.

/* Divi animations */
.trg_fadeintop.et-animated {
  opacity: 1;
  -webkit-animation: fadeInTop 1s 1 cubic-bezier(0.77, 0, 0.175, 1);
  -moz-animation: fadeInTop 1s 1 cubic-bezier(0.77, 0, 0.175, 1);
  -o-animation: fadeInTop 1s 1 cubic-bezier(0.77, 0, 0.175, 1);
  animation: fadeInTop 1s 1 cubic-bezier(0.77, 0, 0.175, 1);
}
.trg_fadeinbottom.et-animated {
  opacity: 1;
  -webkit-animation: fadeInBottom 1s 1 cubic-bezier(0.77, 0, 0.175, 1);
  -moz-animation: fadeInBottom 1s 1 cubic-bezier(0.77, 0, 0.175, 1);
  -o-animation: fadeInBottom 1s 1 cubic-bezier(0.77, 0, 0.175, 1);
  animation: fadeInBottom 1s 1 cubic-bezier(0.77, 0, 0.175, 1);
}
.trg_fadeinleft.et-animated {
  opacity: 1;
  -webkit-animation: fadeInLeft 1s 1 cubic-bezier(0.77, 0, 0.175, 1);
  -moz-animation: fadeInLeft 1s 1 cubic-bezier(0.77, 0, 0.175, 1);
  -o-animation: fadeInLeft 1s 1 cubic-bezier(0.77, 0, 0.175, 1);
  animation: fadeInLeft 1s 1 cubic-bezier(0.77, 0, 0.175, 1);
}
.trg_fadeinright.et-animated {
  opacity: 1;
  -webkit-animation: fadeInRight 1s 1 cubic-bezier(0.77, 0, 0.175, 1);
  -moz-animation: fadeInRight 1s 1 cubic-bezier(0.77, 0, 0.175, 1);
  -o-animation: fadeInRight 1s 1 cubic-bezier(0.77, 0, 0.175, 1);
  animation: fadeInRight 1s 1 cubic-bezier(0.77, 0, 0.175, 1);
}
.trg_flipinx.et-animated {
  -webkit-animation: flipInX 0.6s ease-in-out;
  -moz-animation: flipInX 0.6s ease-in-out;
  -o-animation: flipInX 0.6s ease-in-out;
  animation: flipInX 0.6s ease-in-out;
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  opacity: 1;
}
.trg_flipiny.et-animated {
  -webkit-animation: flipInY 0.6s ease-in-out;
  -moz-animation: flipInY 0.6s ease-in-out;
  -o-animation: flipInY 0.6s ease-in-out;
  animation: flipInY 0.6s ease-in-out;
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  opacity: 1;
}
.trg_gridfadein.et-animated {
  opacity: 1;
  -webkit-animation: gridFadeIn 1s 1 cubic-bezier(0.77, 0, 0.175, 1);
  -moz-animation: gridFadeIn 1s 1 cubic-bezier(0.77, 0, 0.175, 1);
  -o-animation: gridFadeIn 1s 1 cubic-bezier(0.77, 0, 0.175, 1);
  animation: gridFadeIn 1s 1 cubic-bezier(0.77, 0, 0.175, 1);
}
.trg_grow.et-animated {
  opacity: 1;
  -webkit-transform-origin: 0 0;
  -webkit-animation: Grow 0.4s ease-in-out;
  -moz-animation: Grow 0.8s ease-in-out;
  -o-animation: Grow 0.4s ease-in-out;
  animation: Grow 0.4s ease-in-out;
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
}
.trg_slidewidth.et-animated {
  opacity: 1;
  -webkit-animation: slideWidth 1s 1 cubic-bezier(0.77, 0, 0.175, 1);
  -moz-animation: slideWidth 1s 1 cubic-bezier(0.77, 0, 0.175, 1);
  -o-animation: slideWidth 1s 1 cubic-bezier(0.77, 0, 0.175, 1);
  animation: slideWidth 1s 1 cubic-bezier(0.77, 0, 0.175, 1);
}
.trg_fadeouttop:active {
  opacity: 0;
  -webkit-animation: fadeOutTop 1s 1 cubic-bezier(0.77, 0, 0.175, 1);
	-moz-animation: fadeOutTop 1s 1 cubic-bezier(0.77, 0, 0.175, 1);
	-o-animation: fadeOutTop 1s 1 cubic-bezier(0.77, 0, 0.175, 1);
	animation: fadeOutTop 1s 1 cubic-bezier(0.77, 0, 0.175, 1);
}
.trg_fadeoutbottom:active {
  opacity: 0;
  -webkit-animation: fadeOutBottom 1s 1 cubic-bezier(0.77, 0, 0.175, 1);
  -moz-animation: fadeOutBottom 1s 1 cubic-bezier(0.77, 0, 0.175, 1);
  -o-animation: fadeOutBottom 1s 1 cubic-bezier(0.77, 0, 0.175, 1);
  animation: fadeOutBottom 1s 1 cubic-bezier(0.77, 0, 0.175, 1);
}
.trg_fadeoutleft:active {
  opacity: 0;
  -webkit-animation: fadeOutLeft 1s 1 cubic-bezier(0.77, 0, 0.175, 1);
  -moz-animation: fadeOutLeft 1s 1 cubic-bezier(0.77, 0, 0.175, 1);
  -o-animation: fadeOutLeft 1s 1 cubic-bezier(0.77, 0, 0.175, 1);
  animation: fadeOutLeft 1s 1 cubic-bezier(0.77, 0, 0.175, 1);
}
.trg_fadeoutright:active {
  opacity: 0;
	-webkit-animation: fadeOutRight 1s 1 cubic-bezier(0.77, 0, 0.175, 1);
	-moz-animation: fadeOutRight 1s 1 cubic-bezier(0.77, 0, 0.175, 1);
	-o-animation: fadeOutRight 1s 1 cubic-bezier(0.77, 0, 0.175, 1);
	animation: fadeOutRight 1s 1 cubic-bezier(0.77, 0, 0.175, 1);
}

With the few simple steps outlined above, you can utilize any of Divi’s 18 animations just about anywhere on your website.

Let me know about your successes or any problems you encounter in the comments below.

Join our email list

Join our email list

Join our mailing list to receive the latest tech tips from our team.

You have Successfully Subscribed!

Pin It on Pinterest

Share This