← all topics

SVG Path Morphing

GSAP

GSAP tweens a proxy value from 0→1 and the onUpdate callback linearly interpolates between two sets of polygon points. All shapes share 12 vertices so coordinates can be directly interpolated.

from
to
Controls
1.2s
ease

concepts

SVG points attribute

A space-separated string of x,y coordinate pairs: "50,6 72,12 88,28 ...". It's plain text — GSAP has no built-in way to tween it directly.

proxy tween

Animate a plain JS object {t: 0} from 0→1. In onUpdate, read t and manually lerp each vertex pair. GSAP handles timing and easing; you handle the geometry.

lerp formula

a + (b - a) * t for each coordinate. At t=0 you have shape A; at t=1, shape B. Values in between are a smooth blend of the two vertex sets.

vertex count must match

You can only interpolate between shapes with the same number of points. All four shapes here use exactly 12 vertices so coordinates can be directly mapped.

core pattern

const proxy = { t: 0 };
gsap.to(proxy, {
  t: 1, duration: 1.2, ease: "power2.inOut",
  onUpdate() {
    const pts = shapeA.map(([ax, ay], i) => [
      ax + (shapeB[i][0] - ax) * proxy.t,  // lerp X
      ay + (shapeB[i][1] - ay) * proxy.t,  // lerp Y
    ]);
    polygon.setAttribute("points", pts.flat().join(" "));
  },
});