Animate vector lines on scroll! The DP Scrolling SVG module for Divi 5 binds SVG paths to the user’s scroll progress, drawing outline borders and translating shapes dynamically.

How to add module on page

To integrate an SVG scroll animation into your page, follow these steps:

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

Content settings

SVG Image upload

Select your vector file. You can upload standard `.svg` assets or paste raw SVG XML code directly into the content field.

Animation triggers

Define the starting and ending viewport offset positions where the scroll animation starts and finishes playing.

Design settings

Stroke and path animations

Control stroke color outlines, dash arrays, offsets, drawing widths, and motion behaviors (e.g. scroll rotation, scaling, and opacity fade-ins).

Scroll smoothness

Customize the transition dampening factor. This controls how closely the animation tracks active scrollbar speed, preventing jerky visual shifts.

Frequently Asked Questions

What type of SVG works best for the drawing animation?

SVGs that are made up of stroke paths (outline drawings) work best. If the SVG is filled with solid colors, the path drawing animation will only reveal the boundary outlines.

Can I rotate and scale the SVG on scroll?

Yes. The module design tab allows you to configure rotation (degrees) and scale factor values that change progressively as the user scrolls.

Does the animation work on mobile screens?

Yes, the scroll animations are fully responsive. You can also customize trigger offsets specifically for mobile and tablet views.