❮ Previous Next ❯

GSAP MorphSVGPlugin (SVG Shape Morphing)

  • Learn how to animate one SVG shape into another using GSAP MorphSVGPlugin for smooth morphing effects.

  • Introduction

    MorphSVGPlugin is a powerful GSAP plugin that allows you to smoothly transform one SVG shape into another.

    It is widely used for:

    • Icon animations

    • Logo transformations

    • Button hover effects

    • Creative UI transitions

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

  • Basic Concept

    Normally, SVG shapes cannot smoothly transform into each other because their path data is different.

    👉 MorphSVGPlugin solves this by:

    • Matching points between shapes

    • Normalizing path data

    • Animating smoothly between them

    You just tell GSAP what shape to morph into.

Include GSAP 

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


gsap.registerPlugin(MorphSVGPlugin);

Basic Syntax 

gsap.to("#shape1", {
  morphSVG: "#shape2",
  duration: 1
});

  • Parameters / Options

    OptionMeaningExample
    morphSVGTarget shape"#icon2"
    durationAnimation time1
    easeMotion easing"power2.inOut"
    shapeIndexControls point matching"auto"

Circle to Star Morph 

gsap.to("#circle", {
  morphSVG: "#star",
  duration: 1.2,
  ease: "power2.inOut"
});

Hover Morph Effect 

const btn = document.querySelector(".btn");

btn.addEventListener("mouseenter", () => {
  gsap.to("#icon", { morphSVG: "#icon-hover" });
});

btn.addEventListener("mouseleave", () => {
  gsap.to("#icon", { morphSVG: "#icon-default" });
});

Timeline Morph Animation 

const tl = gsap.timeline();

tl.to("#shape", { morphSVG: "#shape2", duration: 1 })
  .to("#shape", { morphSVG: "#shape3", duration: 1 });

  • Common Mistakes

    1. ❌ Morphing non-path elements
      ✔ Convert shapes to <path>

    2. ❌ Different viewBox sizes
      ✔ Keep SVGs consistent

    3. ❌ Forgetting to register plugin
      ✔ Always call gsap.registerPlugin()

    4. ❌ Over-complex SVG paths
      ✔ Simplify paths for smooth animation

❮ Previous Next ❯