SVG Draw on Scroll is a scroll-driven animation extension that progressively draws SVG paths and shapes as visitors move through the page. Instead of instantly displaying the entire SVG artwork, the extension animates the drawing process based on visitor scroll behavior, helping layouts feel more interactive and visually engaging.
The extension works especially well for decorative illustrations, directional arrows, line graphics, dividers, and scroll-based storytelling sections where visual movement helps guide attention naturally throughout the page.
Unlike Text Flow or Image Flow, SVG Draw on Scroll is not limited to a single dedicated content module type. The extension can be applied across different Divi layout structures as long as the SVG element exists within the selected content area.
Common Website Use Cases SVG Draw on Scroll is commonly used for:
- Animated arrows and connectors
- Decorative SVG dividers
- llustrated line graphics
- Interactive diagrams
- Scroll-based storytelling
- Animated section separators
- Motion-based landing page layouts
Because the animation responds directly to scrolling behavior, it works especially well on long-form layouts and modern presentation-style pages.
Supported Layout Areas and Modules
SVG Draw on Scroll can work across multiple native Divi layout elements, including:
- Sections
- Rows
- Columns
- Code Modules
- Text Modules with embedded SVG
- Image Modules using SVG assets
- Other native Divi content areas containing SVG elements
Where to Find the Settings
To access the SVG Draw on Scroll controls:
- Open the layout element or module containing the SVG element.
- Navigate to the Design tab.
- Open the SVG Draw on Scroll settings group.
Once enabled, additional controls become available for managing scroll-based SVG animation behavior.
Understanding the Main Controls
SVG Draw on Scroll includes several advanced controls for managing how SVG paths animate during scrolling.
Some of the most important settings include:
- SVG source settings
- Path selector targeting
- Scroll start and end positions
- Scrub controls
- Draw direction
- Stroke color overrides
- Stroke width controls
- Reverse erase behavior
- Play once options
- Stagger path animation
These settings make it possible to create detailed scroll-driven SVG animations directly inside the Visual Builder without requiring custom animation scripts.
For smoother results, SVG files should remain clean and properly organized before animation settings are configured. Simpler SVG structures are easier to control and usually create more reliable animation behavior.