GSAP Morph SVG — Smooth Shape Transitions

DodaTech Updated 2026-06-28 3 min read

In this tutorial, you will learn about GSAP Morph SVG. We cover key concepts, practical examples, and best practices to help you master this topic.

GSAP MorphSVG plugin animates SVG paths between different shapes, smoothly interpolating vertex coordinates for fluid morphing transitions.

What You'll Learn

By the end of this guide, you will morph between SVG shapes, use shapeIndex for matching vertices, animate stroke and fill along with morph, morph complex multi-path shapes, and build logo morphing animations.

Basic Morph

gsap.to('#path1', {
    morphSVG: '#path2',
    duration: 1.5,
    ease: 'power2.inOut'
});

Shape Index

gsap.to('#morph-path', {
    morphSVG: {
        shape: '#target-path',
        shapeIndex: 8
    },
    duration: 2,
    ease: 'elastic.out(1, 0.5)'
});

Stroke and Fill Animation

gsap.to('#path', {
    morphSVG: '#new-path',
    fill: '#4ecdc4',
    stroke: '#2a9d8f',
    strokeWidth: 3,
    duration: 1.5
});

Multi-Path Morph

gsap.to('.icon-paths', {
    morphSVG: function(i, target) {
        var targets = document.querySelectorAll('.icon-target-paths');
        return targets[i];
    },
    duration: 1,
    stagger: 0.1
});

Common Mistakes

1. Paths Must Have Same Commands

For best results, both paths should use the same SVG commands (M, C, L, etc.). MorphSVGPlugin handles different command counts but with less smooth results.

2. Not Setting shapeIndex

Without shapeIndex, GSAP auto-matches vertices. For precise control, set shapeIndex or pre-Process paths.

3. Paths in Different ViewBoxes

Morphing between paths in different viewBoxes produces unexpected scaling. Keep all paths in the same viewBox.

4. Hidden Path Elements

Target path must be visible in the DOM or have its points accessible. Hidden elements may not compute bounding boxes.

5. Performance With Many Paths

Morphing many complex paths simultaneously may stutter. Use stagger or sequence morphs.

Practice Questions

Q1: What plugin is needed for SVG morphing? A: MorphSVGPlugin by GSAP. It requires a Club GSAP membership.

Q2: How do you match vertices between paths? A: Use shapeIndex to specify which vertex should map where, or let GSAP auto-match.

Q3: Can you morph fill and stroke along with shape? A: Yes. Add fill, stroke, strokeWidth, or any CSS property alongside morphSVG.

Q4: What path commands work best with morphing? A: Cubic bezier curves (C) provide the smoothest morphs. Lines (L) and quads (Q) also work.

Q5: How do you morph multiple paths simultaneously? A: Use a function for morphSVG that returns the corresponding target path for each source path.

Challenge: Build a shape-shifting logo that cycles through 4 different icons (home, heart, star, gear) on hover, with smooth morph transitions between each.

FAQ

Is MorphSVGPlugin free?

No. It requires a GSAP Club membership (Shockingly Green or higher).

Can MorphSVG handle polygons?

Yes. Polygons are converted to paths internally and morphed smoothly.

How do I morph between completely different shapes?

GSAP handles mismatched command counts by adding implicit commands. Results may be less smooth but functional.

Can I use MorphSVG with ScrollTrigger?

Yes. Combine morphing with scroll progress for interactive shape transitions.

How do I debug morph issues?

Use morphSVG: { shape: target, map: 'log' } to log vertex mapping to console.

Try It Yourself

Morph between two SVG shapes.

<!DOCTYPE html>
<html>
<head>
    <title>GSAP MorphSVG Demo</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12/gsap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12/MorphSVGPlugin.min.js"></script>
    <script>gsap.registerPlugin(MorphSVGPlugin);</script>
    <style>
        svg { width: 300px; height: 300px; }
        .controls button { margin: 4px; padding: 8px 16px; cursor: pointer; }
    </style>
</head>
<body style="font-family:sans-serif;padding:20px;">
<h2>SVG Morph</h2>
<div class="controls">
    <button onclick="morphTo('circle')">Circle</button>
    <button onclick="morphTo('triangle')">Triangle</button>
    <button onclick="morphTo('star')">Star</button>
    <button onclick="morphTo('hexagon')">Hexagon</button>
</div>
<svg viewBox="0 0 200 200">
    <path id="morph-target" d="M100,20 C100,20 180,60 180,100 C180,140 100,180 100,180 C100,180 20,140 20,100 C20,60 100,20 100,20 Z" fill="#4ecdc4" stroke="#2a9d8f" stroke-width="2"/>
    <path id="circle" d="M100,20 C144.2,20 180,55.8 180,100 C180,144.2 144.2,180 100,180 C55.8,180 20,144.2 20,100 C20,55.8 55.8,20 100,20 Z" fill="none"/>
    <path id="triangle" d="M100,20 L180,170 L20,170 Z" fill="none"/>
    <path id="star" d="M100,10 L123,68 L185,68 L135,105 L153,165 L100,130 L47,165 L65,105 L15,68 L77,68 Z" fill="none"/>
    <path id="hexagon" d="M100,20 L165,55 L165,145 L100,180 L35,145 L35,55 Z" fill="none"/>
</svg>
<script>
function morphTo(shape) {
    var target = document.getElementById(shape);
    gsap.to('#morph-target', {
        morphSVG: target,
        fill: shape === 'star' ? '#ff6b35' : shape === 'triangle' ? '#2a9d8f' : '#4ecdc4',
        duration: 1.2,
        ease: 'power2.inOut'
    });
}
</script>
</body>
</html>

What's Next

Build a complete GSAP project.

Project — Complete animation project.

← Previous GSAP Flip — Animating DOM Layout Changes Next → GSAP Project — Interactive Animated Landing Page

Built by the developers of DodaTech

Doda Browser, DodaZIP & Durga Antivirus Pro

Home Browse Gsap