Reference guide for animating SVG strokes and paths in DiviAnimator.
Requirements #
You need Divi Theme or Divi Builder, DiviAnimator, the Draw SVG Extension enabled, and SVG Module. Requires Divi 5.
Overview #
Draw SVG animates SVG strokes by drawing them along their paths. The stroke appears to draw itself from start to end, creating a smooth line animation. This works only with SVG elements that have visible strokes.
SVG Module Only: This extension works exclusively with the SVG Module in Divi. It will not affect other elements. The SVG must contain stroke paths to animate.
Enabling the Extension #
- Go to DiviAnimator → Extensions in your WordPress admin
- Find Draw SVG and toggle it on
- Click Save Settings
Once enabled, add an SVG Module to your page. In the SVG Module settings, click the Advanced tab to find Draw SVG settings. Settings below control how the SVG strokes animate.
Settings location: SVG Module → Advanced tab → Draw SVG section
Trigger Start #
Defines where the SVG element aligns with the viewport when the animation begins.
| Position | Meaning |
| Top Top | SVG top aligns with viewport top |
| Top Center | SVG top aligns with viewport center |
| Top Bottom | SVG top aligns with viewport bottom |
| Center Top | SVG center aligns with viewport top |
| Center Center | SVG center aligns with viewport center |
| Center Bottom | SVG center aligns with viewport bottom |
| Bottom Top | SVG bottom aligns with viewport top |
| Bottom Center | SVG bottom aligns with viewport center |
| Bottom Bottom | SVG bottom aligns with viewport bottom |
Most common: Top Center (animation starts when SVG enters viewport from bottom).
Trigger End #
Defines where the SVG element aligns with the viewport when the animation completes. Uses the same alignment options as Trigger Start.
The animation plays between Trigger Start and Trigger End. Example: Start at 'Top Center', End at 'Bottom Top' = animation plays as SVG scrolls across screen.
Scrub #
Determines if animation is scrubbed by scroll position or plays independently.
| Option | Behavior |
| True | Animation progress matches scroll position (direct connection) |
| False | Animation plays independently once triggered |
Scrub True: animation advances/rewinds as you scroll. Scrub False: animation plays once from start to end, ignoring further scrolling.
Timeline #
Toggle to enable timeline-based animation sequencing. When on, the animation uses a timeline object that can coordinate multiple animations together.
Keep on for standard SVG drawing animations. Turn off for simple triggered animations without timeline coordination.
Animation Method #
Defines how the animation behaves relative to the final state.
| Method | Behavior |
| From | Strokes start hidden, draw to visible (entrance) |
| To | Strokes start visible, draw to hidden (exit) |
From is standard for showing SVG strokes drawing in. To erases the strokes during animation.
From #
Optional custom starting value for the stroke animation. Typically left blank to use default (0 for From method, 1 for To method).
Advanced setting. Leave empty for standard behavior. Custom values: number between 0 (invisible) and 1 (fully drawn).
Animation Duration #
How long the SVG strokes take to draw, in seconds. Range: 0+. Default: 0.
Set to 0 for instant drawing. Typical values: 0.5-2 seconds for smooth drawing effect. Longer = slower, more visible drawing animation.
Delay #
Waits before animation starts, in seconds. Range: 0+. Default: 0.
Useful for coordinating multiple SVG animations. Set to 0.2 for 200ms delay, 0.5 for 500ms delay, etc.
Easing #
Controls the speed curve of the drawing animation. Options include Sine InOut, Linear, Power curves, and others. Default: Sine InOut.
| Easing | Feel |
| Linear | Consistent drawing speed |
| Sine InOut | Smooth, organic drawing |
| Power 2 Out | Quick start, slow end |
| Power 3 Out | Snappy, accelerating draw |
Sine InOut creates the most natural drawing effect. Linear for uniform speed. Power curves for more dramatic effects.
Enable Yoyo #
When enabled, the animation reverses after completing forward. The strokes draw in, then erase back out.
Turn on for repeating draw/erase effects. Keep off for single draw animations. Works best with Repeat set to a value greater than 1.
Repeat #
Number of times the animation repeats. Range: 0+. Default: 0.
| Value | Behavior |
| 0 | Animation plays once, no repeat |
| 1 | Animation plays twice (once + one repeat) |
| 2+ | Animation repeats that many times total |
Set to 0 for single play. Set to 1 or 2 for looping animations. Works with Enable Yoyo to create draw/erase loops.
Configuration Examples #
Simple Drawing Animation #
SVG strokes draw in as page scrolls.
| Setting | Value |
| Trigger Start | Top Center |
| Trigger End | Bottom Top |
| Scrub | False |
| Timeline | On |
| Animation Method | From |
| Animation Duration | 1.5 |
| Delay | 0 |
| Easing | Sine InOut |
| Enable Yoyo | Off |
| Repeat | 0 |
Scrubbed Drawing (Scroll-Linked) #
SVG draws/erases based on scroll position.
| Setting | Value |
| Trigger Start | Center Center |
| Trigger End | Center Center |
| Scrub | True |
| Animation Method | From |
| Animation Duration | 0 |
| Easing | Linear |
Looping Draw/Erase #
SVG continuously draws and erases.
| Setting | Value |
| Trigger Start | Top Bottom |
| Trigger End | Top Top |
| Scrub | False |
| Animation Duration | 2 |
| Enable Yoyo | On |
| Repeat | 3 |
| Repeat Delay | 0.5 |
Support #
For issues or questions, contact support@diviexpand.com or submit a ticket through your DiviAnimator account.
© 2026 DiviAnimator. All rights reserved.
