Envelope + fade in place
RecommendedGSAP outer · opacity internals
Morph the outer mouth boundary while each tooth and accent appears already in its final position.
Morph comparison lab
Happy → Angry mouth
Same artwork, same scrubber, eight strategies. The recommended treatment uses the Angry outer silhouette as the envelope and reveals each internal shape in its authored position.
Artwork topology
Happy: 1 path · Angry: layered paths
Envelope + grow in place
GSAP outer · scale internals
Keep every internal shape fixed in space, then grow it from its own center without path movement.
Envelope + staggered grow
GSAP outer · indexed reveal
Reveal the final internal shapes one by one so the teeth read as authored pieces, not a melted morph.
Envelope + instant reveal
GSAP outer · final geometry
The outer shape morphs continuously; the internal pieces switch on together at the midpoint, already resolved.
GSAP MorphSVG
GSAP MorphSVGPlugin
High-quality single-path morph using segment mapping, smoothing, and curve controls.
One → four shapes
Flubber
Lets one source shape separate into the four Angry mouth paths.
Path interpolation
d3-interpolate-path
Open-source path baseline with automatic command normalization.
Anime.js morphTo
Anime.js
Open-source SVG path morph with adjustable point precision.
What this comparison tells us
The envelope family keeps the Angry teeth and accents in their authored locations. Choose fade, grow, stagger, or instant reveal for the internals; the library baselines below show why one-to-many path morphing creates the strange travel.
The recommended result changes the outer envelope continuously and treats each internal path as a separate authored object.