---
title: "DrawOnScroll — Free Framer component · Best of Framer"
description: "Free Framer component · by Anux · Interactive. Scroll-triggered SVG path drawing"
canonical: "https://framer.elliotli.dev/component/drawonscroll"
---

[Home](/)/[Components](/components)/[Interactive](/components/category/interactive)/DrawOnScroll

# DrawOnScroll

Scroll-triggered SVG path drawing

[View on Framer](https://framer.com/marketplace/components/drawonscroll/?via=elliot-li)

![DrawOnScroll preview image 1](https://framer.elliotli.dev/og/component/drawonscroll/244a777381f0372a/1600x1200.jpg)

## Summary

Scroll-triggered SVG path drawing

## Description

Make any SVG line art draw itself as it scrolls into view — perfect for logos, illustrations, signatures, and hand-drawn accents.

[Preview](https://innovative-labeling-209965.framer.app/)

**Key settings**

-   **Trigger At** — where in the viewport drawing starts (0–100%)
    
-   **Per-path control** — direction (forward/reverse), duration, delay, stroke color & width, position/scale
    
-   **Loop** — Restart or Yoyo style, with fade-out and loop delay
    
-   **Replay** — redraw on every re-entry, or draw once
    
-   **Sizing** — Fit / Fill / Stretch, fully responsive
    
-   **Build helpers** — name and highlight paths on the canvas (never shown on your live site)
    

## Rank history [How rankings work →](/terms#rankings)

-   All · #667

## Details

- **Author**: Anux
- **Published**: 2026-08-10
- **Updated**: 2026-08-10
- **Added**: 2026-08-10
- **Categories**: Interactive

## More like this

-   [Drawing component](/component/drawing-component) — Ariel Barrios · Free — Just a free drawing component
-   [Code Comparison](/component/code-comparison) — Syauqizaidan Khairan Khalaf · $5 — Before and after code side by side
-   [Voice Testimonials](/component/voice-testimonials) — valorsic studio · $15 — Voiceover & typewriter reviews
-   [Product Tour Pro](/component/product-tour-pro) — Oddframe · $10 — Showcase Products Step by Step