Building SVG Animations with GSAP

SVGs bring scalable vector graphics to life, but animating them can be tricky without the right tools. The GSAP (GreenSock Animation Platform) library offers a robust, performant way to animate SVG properties, attributes, and even complex timelines. In this practical guide, frontend developers and designers will learn how to create polished SVG animations with GSAP, including small code snippets you can reuse in your projects. For more SVG resources, visit SVGEnius.

Why GSAP for SVG animations

GSAP shines with SVG for several reasons:

• Fine-grained control over properties like x, y, transform, strokeDasharray, and path data.
• High performance with requestAnimationFrame-driven tickers and efficient rendering.
• Simple timelines to orchestrate multiple animations in perfect sync.
• Broad browser support and a rich ecosystem of plugins for morphing, scroll-based animations, and more.

Getting started with a quick SVG animation

First, include GSAP in your project. You can pull it from a CDN or install via npm. Here’s a minimal setup using a small inline SVG circle that drops into view.

Snippet (HTML + inline SVG):

<!-- Include GSAP from CDN -->
<script src="https://cdn.jsdelivr.net/npm/gsap@3/dist/gsap.min.js"></script>

<svg width="200" height="200" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
  <circle id="dot" cx="100" cy="20" r="12" fill="#6c5ce7" />
</svg>

<script>
  gsap.fromTo("#dot", { y: -30, opacity: 0 }, { y: 0, opacity: 1, duration: 0.8, ease: "back.out(2)" });
</script>

What happens: the circle starts above the viewBox, fades in, and lands with a little bounce. The code is tiny but demonstrates GSAP’s straightforward syntax for SVG transforms and opacity.

Animating SVG paths and strokes

Animating stroke properties, especially strokeDasharray and strokeDashoffset, creates engaging line drawing effects. This is a classic SVG animation pattern that GSAP handles smoothly.

Snippet (path drawing):

<svg width="400" height="120" viewBox="0 0 400 120" xmlns="http://www.w3.org/2000/svg">
  <path id="line" d="M10 60 C 120 0, 240 120, 390 60" fill="none" stroke="#4a90e2" stroke-width="4" />
</svg>

<script>
  const path = document.getElementById("line");
  const len = path.getTotalLength();
  path.style.strokeDasharray = len;
  path.style.strokeDashoffset = len;

  gsap.to(path, { strokeDashoffset: 0, duration: 2, ease: "power1.inOut" });
</script>

Note: the strokeDashoffset animation reveals the stroke as if the line is drawn in real time, which is a compelling micro-interaction for UI illustrations or flow diagrams.

Using GSAP Timelines for orchestrated animations

Timelines let you sequence multiple SVG animations with precise timing. This keeps your code organized as projects scale up.

Snippet (timeline):

<svg width="300" height="100" viewBox="0 0 300 100" xmlns="http://www.w3.org/2000/svg">
  <circle id="a" cx="60" cy="50" r="12" fill="#e74c3c"/>
  <circle id="b" cx="120" cy="50" r="12" fill="#f1c40f"/>
  <circle id="c" cx="180" cy="50" r="12" fill="#2ecc71"/>
</svg>

<script>
  const tl = gsap.timeline({ repeat: -1, yoyo: true });
  tl.to("#a", { x: 60, duration: 0.6 })
    .to("#b", { x: 60, duration: 0.6 }, "-=0.4")
    .to("#c", { x: 60, duration: 0.6 }, "-=0.4");
</script>

Workflows become predictable: you can add easing, delays, or stagger effects without juggling many independent animations.

Morphing shapes: morphSVG with GSAP (via plugins)

GSAP’s MorphSVGPlugin (now part of Club GreenSock) enables smooth morphing between shapes. If you don’t have a licensed plugin, you can still achieve simple morph-like results using path data transitions, but for true morphing you’ll want the plugin.

Snippet (path morph, conceptually):

<svg width="200" height="100" viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
  <path id="shape" d="M20,50 C40,20 160,20 180