Tier 2 · GSAP MorphSVGPlugin · Transitions

svg-path-morph

A single SVG path re-draws itself between shapes — scrubbed by scroll, or triggered on hover. The outline itself morphs; nothing cross-fades.

Scroll · scrubbed morph through 3 shapes

timeline steps ease:"none" · ScrollTrigger scrub:0.8 · shapeIndex:"auto"

Hover · disc ⇄ star

enter 0.6s power2.inOut · leave 0.5s power2.out — disabled on touch (static disc)

Both drives share one primitive: gsap.to(path,{morphSVG:{shape,shapeIndex:"auto"}}). Pass any shape sequence as data-shapes; the path's authored d is the resting/static shape.