With Divi Animation options, it's easy to apply stunning animations to all Sections, Rows, Columns and Modules that captivate the eye.
You can combine animation effects using staggard delays, varying intensities and lengths, and more.
This guide will show you how to find Divi's animation options, what each setting does, and tips and best practices for using them effectively.
Where to Find the Divi Animation Options
Click on the element's gear icon
to open up the element's settings Settings modal windowGo to the Design tab
Expand the Animation option group
All Divi Animation Options Explained
Let's explore all the Divi Animation Options available within Divi.
Default Setting in the Divi Animation Options: None
By default, all elements within Divi do not have any Divi Animation Options applied.
That means there is no delay when loaded, and they appear as soon as the element is loaded to the page.
The element will appear when you scroll to it and will be in view until you scroll past it.
Fade
The Fade animation gradually loads the element, starting at 0% opacity and ending at 100% opacity.
This is a classic animation that adds a classy feeling to the design.
You can adjust the duration and delay of the fade and more using the options below to create a custom fade animation.
Animation Duration - Speed up or slow down your animation by adjusting the duration. Units are in milliseconds, and the default animation duration is one second.
Animation Delay - If you want to add a delay before your animation runs, you can designate that delay here in milliseconds. This can be useful when using multiple animated modules together.
Animation Starting Opacity - By increasing the starting opacity, you can reduce or remove the applied fade effect.
Animation Speed Curve - Adjust the easing method of your animation. Easing your animation in and out will create a smoother effect than a linear speed curve.
Animation Repeat - By default, animations will only be placed once. If you want to loop your animation continuously, choose the Loop option here.
Slide
The Slide animation means the element will slide in from:
The left
The right
The top
The bottom
Center
Depending on your chosen direction, the element's starting position will be left, right, top, bottom, or center of the screen.
It will slide into position once that element comes into the viewport. You can adjust the look and feel of the slide animation using the controls below.
Animation Direction - Pick up to five different animation directions, each of which will adjust your animated element's starting and ending position.
Animation Duration - Speed up or slow down your animation by adjusting the duration. Units are in milliseconds, and the default animation duration is one second.
Animation Delay - If you want to add a delay before your animation runs, you can designate that delay here in milliseconds. This can be useful when using multiple animated modules together.
Animation Intensity - Intensity affects how subtle or aggressive your animation will be. Lowering the intensity will create a smoother and more subtle animation while increasing the intensity will create a snappier, more aggressive animation.
Animation Starting Opacity - By increasing the starting opacity, you can reduce or remove the applied fade effect.
Animation Speed Curve - Adjust the easing method of your animation. Easing your animation in and out will create a smoother effect than a linear speed curve.
Animation Repeat - By default, animations will only be placed once. If you want to loop your animation continuously, choose the Loop option here.
Bounce
When applied, the bounce effect will make an element quickly jump up and down or left and right on the screen and land in its position once the animation is complete.
This animation adds a bit of fun and whimsy to your design with its active animation. The controls below give you granular control over the look and feel of the bounce animation.
Animation Direction - Pick up to five different animation directions, each of which will adjust your animated element's starting and ending position.
Animation Duration - Speed up or slow down your animation by adjusting the duration. Units are in milliseconds, and the default animation duration is one second.
Animation Delay - Add a delay before your animation runs. You can designate that delay here in milliseconds. This can be useful when using multiple animated modules together.
Animation Starting Opacity - By increasing the starting opacity, you can reduce or remove the applied fade effect.
Animation Speed Curve - Adjust the easing method of your animation. Easing your animation in and out will create a smoother effect than a linear speed curve.
Animation Repeat - By default, animations will only be placed once. If you want to loop your animation continuously, choose the Loop option here.
Zoom
The Zoom animation starts the element small and grows it to 100% in size, creating a zooming-in effect. You can use the controls below to adjust this animation's duration, delay, intensity, and more.
Animation Direction - Pick up to five different animation directions, each of which will adjust your animated element's starting and ending position.
Animation Duration - Speed up or slow down your animation by adjusting the duration. Units are in milliseconds, and the default animation duration is one second.
Animation Delay - Add a delay before your animation runs. You can designate that delay here in milliseconds. This can be useful when using multiple animated modules together.
Animation Intensity - Intensity affects how subtle or aggressive your animation will be. Lowering the intensity will create a smoother and more subtle animation while increasing the intensity will create a snappier, more aggressive animation.
Animation Starting Opacity - By increasing the starting opacity, you can reduce or remove the applied fade effect.
Animation Speed Curve - Adjust the easing method of your animation. Easing your animation in and out will create a smoother effect than a linear speed curve.
Animation Repeat - By default, animations will only be placed once. If you want to loop your animation continuously, choose the Loop option here.
Flip
The Flip animation starts with the top of an element tipped backward (creating a 3D effect), then tilts forward into place, completing the animation.
You can control the look and feel of the flip animation using the controls below.
Animation Direction - Pick up to five different animation directions, each of which will adjust your animated element's starting and ending position.
Animation Duration - Speed up or slow down your animation by adjusting the duration. Units are in milliseconds, and the default animation duration is one second.
Animation Delay - Add a delay before your animation runs. You can designate that delay here in milliseconds. This can be useful when using multiple animated modules together.
Animation Intensity - Intensity affects how subtle or aggressive your animation will be. Lowering the intensity will create a smoother and more subtle animation while increasing the intensity will create a snappier, more aggressive animation.
Animation Starting Opacity - By increasing the starting opacity, you can reduce or remove the applied fade effect.
Animation Speed Curve - Adjust the easing method of your animation. Easing your animation in and out will create a smoother effect than a linear speed curve.
Animation Repeat - By default, animations will only be placed once. If you want to loop your animation continuously, choose the Loop option here.
Fold
The Fold animation makes the element look like it's unfolding on the screen.
Part of the element is titled back and then comes into position by the end of the animation.
Use the controls below to adjust the look and feel of the fold animation.
Animation Direction - Pick up to five different animation directions, each of which will adjust your animated element's starting and ending position.
Animation Duration - Speed up or slow down your animation by adjusting the duration. Units are in milliseconds, and the default animation duration is one second.
Animation Delay - Add a delay before your animation runs. You can designate that delay here in milliseconds. This can be useful when using multiple animated modules together.
Animation Intensity - Intensity affects how subtle or aggressive your animation will be. Lowering the intensity will create a smoother and more subtle animation while increasing the intensity will create a snappier, more aggressive animation.
Animation Starting Opacity - By increasing the starting opacity, you can reduce or remove the applied fade effect.
Animation Speed Curve - Adjust the easing method of your animation. Easing your animation in and out will create a smoother effect than a linear speed curve.
Animation Repeat - By default, animations will only be placed once. If you want to loop your animation continuously, choose the Loop option here.
Roll
The Roll animation makes the element look like it's rolling onto the screen.
You can choose the element to roll in from the top, right, left, bottom, or center. Use the controls below to adjust the look and feel of the roll animation.
Animation Direction - Pick up to five different animation directions, each of which will adjust your animated element's starting and ending position.
Animation Duration - Speed up or slow down your animation by adjusting the duration. Units are in milliseconds, and the default animation duration is one second.
Animation Delay - Add a delay before your animation runs. You can designate that delay here in milliseconds. This can be useful when using multiple animated modules together.
Animation Intensity - Intensity affects how subtle or aggressive your animation will be. Lowering the intensity will create a smoother and more subtle animation while increasing the intensity will create a snappier, more aggressive animation.
Animation Starting Opacity - By increasing the starting opacity, you can reduce or remove the applied fade effect.
Animation Speed Curve - Adjust the easing method of your animation. Easing your animation in and out will create a smoother effect than a linear speed curve.
Animation Repeat - By default, animations will only be placed once. If you want to loop your animation continuously, choose the Loop option here.
Tips & Best Practices for Using Divi Animation Options
Stay Subtle
Too many animations can be distracting and take your visitor's attention away from important content. Subtle animations can enhance the user experience without confusing them or distracting them.
Pay Attention to Speed
Animations can get out of wack when it comes to speed and timing. It can be jarring and hard to understand when things animate too quickly.
On the other hand, when elements animate too slowly, it can be frustrating and seem like your website needs to load more slowly.
Don't Animate Everything
The animation aims to enhance the user experience, direct attention, and highlight important elements, not create a video game. More moving elements can create clarity and cognitive overload.
Synchronize Divi Animation Options
Animating several elements at once can make your design truly dynamic and engaging.
Try using several different Divi Animation Options within a section to create an experience that catches the eye on your page.
Great for Drawing Attention to CTAs
Call to Action is important in creating a design that gets people to take action on your page.
Whether that's signing up for a newsletter, downloading a freebie, submitting an inquiry, or booking a call. Animating your CTAs helps them stand out even more and catch your users' eyes.