MorphSVG

You register MorphSVGPlugin, then put morphSVG in the vars of a normal gsap.to(). The value is the shape you want to end on, given as a selector, an element, or a raw path-data string. GSAP reads the d attribute of the start path and the target, matches up segments, and interpolates the anchor and control points frame by frame so the outline flows from one form to the other.

MorphSVG tweens <path>, <polyline>, and <polygon> directly. A <circle>, <rect>, <ellipse>, or <line> has no d attribute, so convert it first with MorphSVGPlugin.convertToPath(). That call replaces the element in the DOM with an equivalent <path>, after which it morphs like any other path.

The default morph works for simple shapes. When the in-between frames look wrong, you switch from the shorthand string to the object form and reach for three options.

type: rotational

type: "linear" (the default) moves each point in a straight line to its target. type: "rotational" interpolates angle and length instead, which keeps curved shapes from collapsing through their own center mid-morph. Try it first whenever the linear morph caves in or kinks.

shapeIndex

shapeIndex offsets which point on the start path maps to the first point on the end path. It's the fix for a morph that twists or turns inside-out. Set shapeIndex: "log" once, read the suggested number out of the console, then paste it back in. For a path with several closed segments it takes an array, one value per segment.

map

map decides how start and end segments pair up: "size" (default), "position", or "complexity". If none of the three line the shapes up, the shapes are too different to morph as one path, split them into multiple paths and morph each separately.

• Icon state swaps where the outline changes (play to pause, hamburger to close, plus to minus)
• Logo or mark animations that flow between two custom shapes
• A blob or organic background shape that drifts between forms on a loop
• Checkmark or status morphs in a form, where a circle resolves into a tick
• Any shape transition where the silhouette itself has to change, not just its position or scale

• You're drawing or erasing a stroke rather than reshaping a fill, use DrawSVG, which animates stroke-dashoffset
• You're moving an element along a path rather than changing the path, use MotionPath
• You're transitioning between two DOM layout states (cards, grids, list reorder), use Flip, it measures real elements and animates position and size
• The shape change is a simple reveal or rounded-corner wipe, an animated CSS clip-path is lighter and needs no plugin
• Both states are full DOM trees and you only need the browser to cross-fade them, the native View Transitions API does that without GSAP

The Annnimate library has a small morph family, and reading how each piece is built is the fastest way to learn which morph tool fits which job. Neither of these uses MorphSVG, because their content is HTML, not SVG paths, but they sit next to it and the contrast is the lesson.

• Text Morph rearranges characters in a search bar or headline as you type. It uses GSAP Flip rather than MorphSVG, because the things moving are real text spans, not d-attribute paths. Reach for MorphSVG instead when the letterforms themselves are SVG outlines that have to reshape.
• Morphing Dialog expands a card into a native <dialog> and reverses the move on close. It runs on the CSS View Transitions API, the right call when whole HTML blocks need to morph between two layouts. MorphSVG is for the case below that: a single vector outline changing shape.