Web morphing interpolates an SVG path's d attribute directly; After Effects interpolates the path data of two shape layers between keyframes instead. The rule is the same — matching vertex counts morph cleanly, and animators manually add or remove anchor points when they don't match.
It shows up everywhere from a small UI micro-interaction (a play triangle turning into a pause icon) to a title sequence where several variants of a brand mark morph into each other in sequence. Paired with Trim Paths, a shape can draw on and change form at the same time.
If vertex order doesn't line up — which point maps to which — the shape flips or twists mid-morph. The fix is lining up both paths' starting points before you morph them.
When to use
Only morph shapes whose meaning is connected — like play and pause — so the transformation reads as obvious rather than confusing.