SVG line draw on Scroll
The SVG Line Draw on Scroll effect is an animation technique that makes SVG paths (lines, shapes, or strokes) appear as if they are being drawn progressively as the user scrolls down the page. This creates a dynamic, interactive effect that enhances visual storytelling and engagement.
To ensure smooth scroll-triggered line-drawing animations, your SVG must be properly structured. Below are best practices and ready-to-use examples for different scenarios.
DOs:
✔ Use PATH, LINE, POLYLINE, POLYGON, RECT, CIRCLE, or ELLIPSE – These elements support stroke-dasharray and stroke-dashoffset.
✔ Define stroke and stroke-width – Without a stroke, nothing will animate!
✔ Keep paths simple – Complex paths with many points may cause performance issues.
✔ Use fill=”none” for open paths – Prevents unwanted filled shapes.
DON’Ts:
✖ Don’t use , , or without strokes – They won’t animate unless stroked.
✖ Avoid grouped paths () without strokes – Only individual stroked elements animate.
✖ Don’t embed complex gradients/patterns – Can slow down rendering.
Draw Direction
It defines how the line(s) of your SVG element will be animated.
- Forward (0% to 100%): Starts from zero to 100%. This is the default drawing mode.
- Reverse (100% to 0%): Starts from the end to zero point. It creates a “reverse build” animation.
- Center Out (50% to 0% 100%): Paths animate starting from the center in both directions.
- Edges In (0% 100% to 50%): Paths animate starting from both ends and finish meeting at the centre.
- Custom (use start/end %): Paths will animate at the given start and end position. Separate values by the forward slash.
Stagger Timing
If your chosen Animation Style is “All at once”, and your SVG contains more that one line lement, you can fine-tune an overall delay between their timing.
Stagger Timing will also work with both “Sequential” and “Reverse Sequential” Animation Style!
Animation Style
It defines how the animation of your SVG element is supposed to be run.
- All at once: All the line elements inside the SVG will be animated at the same time.
- Sequential: All the line elements inside the SVG will be animated in sequential order, one after another.
- Reversed Sequential: All the line elements inside the SVG will be animated in sequential order, one after another, starting in reverse order.
Example
By words: Start drawing all the SVG file strokes at once, as soon as the SVG element enters the viewport (Trigger mode: Viewport), and finish drawing in 1200px.
If you added a start offset of 100px (in this case), the animation would start 100px past the viewport bottom!
