Shape morph

셰이프 모프

Interpolating one shape layer's path vertices into another's inside After Effects, so a shape production-morphs into a different shape.

Also known as: Path morph (AE)Shape layer morph
···
html
<svg class="morph-svg" viewBox="0 0 100 100"><path id="sh" class="sh"/></svg>
css
.morph-svg{width:min(52%,200px);aspect-ratio:1}
.sh{fill:var(--accent)}
js
const SHAPES = [
  'M50,20 L80,50 L50,80 L20,50 Z',
  'M50,15 L85,85 L15,85 Z',
  'M20,20 L80,20 L80,80 L20,80 Z',
  'M50,15 A35,35 0 1 1 49.9,15 Z',
];
const el = document.getElementById('sh');
let i = 0;
el.setAttribute('d', SHAPES[0]);
function next() {
  i = (i + 1) % SHAPES.length;
  el.style.transition = 'none';
  el.animate([{ d: 'path("' + SHAPES[(i + SHAPES.length - 1) % SHAPES.length] + '")' }, { d: 'path("' + SHAPES[i] + '")' }], { duration: 900, easing: 'cubic-bezier(.4,0,.2,1)', fill: 'forwards' });
  setTimeout(next, 1700);
}
setTimeout(next, 1200);

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.