SVG Animator

The Divi SVG Animator Module lets you bring your static SVG graphics to life with smooth and engaging animations. It’s perfect for adding motion to icons, illustrations, and data visuals across your website. With simple animation controls, you can create interactive and eye-catching designs without any coding.

How to add module on page

Once Divi Plus is activated, it adds several modules to the Divi builder. To add a module on the page, use the following steps:

1. Create/Edit a Page/Post that uses Divi builder.
2. Create/Edit a row.
3. Click on Add New Module option; choose the DP SVG Animator module.

Content settings

SVG image

Upload or select the SVG file you want to animate. This SVG will be used as the base graphic for all animation effects.

Animation settings

Animation type

Choose how the animation plays:

• Sync – All animation elements run at the same time.
• Delayed – Animation starts with a slight delay between elements.
• One by One – Each element animates sequentially, one after another.

Animation duration

Set the total time for the animation to complete. Higher values create slower animations, while lower values result in faster motion.

Animation curves

Control the motion style using:

• Linear – Consistent speed throughout.
• Ease – Smooth acceleration and deceleration.
• Ease In Out – Slow start and end with faster movement in between.
• Ease Out Bounce – Finishes with a bouncing effect.

Reanimate on click (toggle)

Enable this option to replay the animation every time the SVG is clicked. Disable it if the animation should play only once when the page loads.