Next ❯

GSAP DrawSVGPlugin (SVG Line Animation)

  • Learn how to animate SVG paths as if they are being drawn using GSAP DrawSVGPlugin.

  • Introduction

    DrawSVGPlugin is a GSAP plugin that allows you to animate SVG strokes like they are being drawn by hand.

    It is commonly used for:

    • Logo reveal animations

    • Line illustrations

    • Icons and SVG paths

    • Signature-style animations

    This plugin is part of GreenSock GSAP’s premium plugins.

  • Basic Concept

    SVG paths are drawn using stroke-dasharray and stroke-dashoffset.

    👉 DrawSVGPlugin handles all this math for you.

Instead of complex SVG calculations, you simply animate: 

drawSVG: "0% 100%"

Include GSAP

DrawSVGPlugin is a Club GreenSock (paid) plugin. 

<script src="https://unpkg.com/gsap@3/dist/gsap.min.js"></script>
<script src="https://unpkg.com/gsap@3/dist/DrawSVGPlugin.min.js"></script>

Basic Syntax 

gsap.from(".path", {
  drawSVG: 0,
  duration: 2
});

  • Parameters / Options

    ValueMeaningExample
    0Nothing visibledrawSVG: 0
    100%Fully visibledrawSVG: "0% 100%"
    "50% 100%"Half drawPartial draw
    "100% 0%"Reverse drawReverse animation

Simple Line Draw 

gsap.from("path", {
  drawSVG: 0,
  duration: 2,
  ease: "power2.out"
});

Logo Reveal Animation 

gsap.timeline()
  .from(".logo-path", {
    drawSVG: 0,
    duration: 1.5,
    stagger: 0.2
  });

Reverse Draw Effect 

gsap.to(".path", {
  drawSVG: "100% 0%",
  duration: 2
});

  • Common Mistakes

    1. ❌ Using fill instead of stroke
      ✔ DrawSVG works only with stroke

    2. ❌ Forgetting stroke width
      ✔ Path must have visible stroke

    3. ❌ Using non-path SVG elements
      ✔ Works best with <path>, <line>, <polyline>

    4. ❌ Not registering plugin
      ✔ Use gsap.registerPlugin(DrawSVGPlugin)

Next ❯