Text Animation

Divi Text Animation Effects

The Text Animation module in Divi Essential allows you to create engaging and dynamic text effects such as typing, rotating, sliding, and more. It helps you highlight key messages and improve user engagement with visually appealing animations.

How to Use the Text Animation Module

1. Open your page using the Divi Visual Builder.
2. Click the “+” button to add a new module.
3. Search for “Text Animation” and select it.
4. Add your text content in the Content tab.
5. Choose your preferred animation style from the Animation Type option.
6. Customize speed, delay, and loop settings as needed.
7. Save the module and check the result on the frontend.

Available Animation Types

• Typing – Simulates a typewriter effect.
• Fade – Smooth fade-in text animation.
• Slide – Text slides into view.
• Rotate – Rotating text transitions.
• Zoom – Zoom-in effect for emphasis.

Key Settings Explained

• Animation Type: Select the style of animation.
• Animation Speed: Control how fast the animation plays.
• Delay: Set delay before animation starts.
• Loop: Enable or disable repeating animation.
• Before Text / After Text: Add static text before or after the animated words.

Tips for Best Results

• Keep animated text short and meaningful.
• Avoid using too many animations on one page.
• Adjust speed to ensure readability.
• Test on mobile devices for better responsiveness.

Troubleshooting

Animation keeps looping even when "Once" is selected

Make sure the loop option is disabled. If the issue persists, clear your site cache and check again.

Text jumps or shifts unexpectedly

This may happen if spacing is inconsistent. Try adding a space in the before/after text fields or adjust typography settings.

Animation not visible on frontend

Clear cache (browser, plugin, CDN) and ensure no JavaScript conflicts are present.