Skip to content
MotionLab

SVG Shape Morphing

Circle → star → blob → polygon, scrubbed by scroll with MorphSVG.

sketchGSAPMorphSVGScrollTrigger

How it works

MorphSVGPlugin interpolates between shapes with different point counts; shapeIndex "auto" picks the best rotation.

Performance

The path is re-computed per frame — keep point counts modest (< 200).

Accessibility & reduced motion

Runs inside useGSAP with the effective reduced-motion flag as a dependency — reduced mode swaps scrubbed motion for simple fades.

Playgroundscroll
Point mapping
Export
{
  "lerp": 0.1,
  "scrub": 1,
  "markers": false,
  "mapping": "size"
}