The Transitions options in Divi allow you to customize the timing and speed of hover animations, creating smooth and visually appealing interactions for your modules. These settings are especially useful for adding a polished, dynamic feel to your site.
Where to Find the Transitions Options
Open the Module Settings: Click the gear icon or the module itself to access the settings.
Navigate to the Advanced Tab: Locate the Transitions option group.
Transitions Customization Settings
Transition Duration: Set the time (in milliseconds) it takes for the animation to complete.
Example: A duration of
300mscreates a smooth effect, while shorter durations (e.g.,100ms) make transitions quicker.
Transition Delay: Define how long (in milliseconds) the animation waits before starting.
Example: Use a slight delay (e.g.,
200ms) to create a staggered or intentional hover effect.
Transition Speed Curve: Choose how the animation accelerates and decelerates during the transition.
Options include:
Ease: Smooth transition, speeding up and slowing down naturally.
Linear: Constant speed throughout.
Ease-In: Starts slow and speeds up.
Ease-Out: Starts fast and slows down.
Ease-In-Out: Combines slow starts and stops for a natural flow.
Tips for Using Transitions
Smooth Interactions: Use moderate durations (e.g.,
300–500ms) for a natural, professional feel.No Overlapping Effects: Avoid long delays that can make the hover animation feel unresponsive.
Test Across Devices: Ensure the transitions are fluid and appropriate for both desktop and touch devices.
The Transitions options help you add subtle, impactful animations that enhance user experience and make your modules stand out.