Divi's Animation design options let you add motion effects to modules, making your layouts more dynamic and engaging. You can customize the style, timing, and behavior of animations to match your design and user experience goals.
Where to Find the Animation Options
Open the Module Settings: Click the gear icon or the module itself to access the settings.
Navigate to the Design Tab: Locate the Animation option group.
Animation Customization Settings
Animation Style: Select the type of animation you want to apply, such as fade, slide, zoom, bounce, or custom options.
Animation Duration: Set how long the animation takes to complete one cycle. Use shorter durations for quick effects or longer ones for smooth transitions.
Animation Delay: Define the time before the animation starts. A delay can help stagger animations or control when they appear in a sequence.
Animation Starting Opacity: Adjust the module’s initial transparency at the start of the animation. Lower opacity creates a fade-in effect.
Animation Speed Curve: Choose how the animation accelerates and decelerates using easing methods. Options include:
Ease-In: Starts slowly and speeds up.
Ease-Out: Starts quickly and slows down.
Ease-In-Out: Combines both for a smooth start and end.
Linear: Maintains a constant speed throughout.
Animation Repeat: Decide whether the animation plays only once or loops continuously.
Tips for Using Animation Options
Keep It Subtle: Use smooth, non-distracting animations to enhance your design without overwhelming the user.
Sequence Your Animations: Combine delays with different modules to create a cascading or staggered effect.
Test on Devices: Ensure animations look good and perform well on mobile and slower connections.
Match Your Design Style: Choose animations that align with the tone and purpose of your site.
These options let you bring your content to life, adding personality and interactivity while keeping a polished, professional feel.