Advanced Features

Vector Morphing

SVG path interpolation — animate between vector shapes with point-by-point Bézier morphing.

What is vector morphing?

Vector morphing animates between shapes by interpolating their path data point-by-point, creating smooth shape transitions instead of simple crossfades.

Supported node types

  • Vector — custom vector paths
  • Rectangle
  • Ellipse — circles, ovals
  • Polygon
  • Star
  • Line
  • Boolean Operation — union, subtract, intersect (flattened)

How it works

MotionKit uses a normalized cubic Bézier point system:

  1. Path parsing — SVG path commands (M, L, C, Q, Z) are parsed and all geometry is converted to normalized cubic Bézier segments. Each point stores: x, y, handleIn (control point entering), handleOut (control point leaving).
  2. Snapshot capture — when you set a morph keyframe, MotionKit reads the complete vector data from Figma and stores a morph snapshot — an array of paths, each containing an array of morph points.
  3. Interpolation — between keyframes, each point's x, y, handleIn, and handleOut values are lerped individually with the applied easing curve.
  4. Reconstruction — interpolated points are converted back to SVG path strings and applied to the Figma node's vector data.

Compatibility rules

For smooth interpolation, morph keyframes must be structurally compatible:

  • Same number of paths (e.g., both shapes have 1 path, or both have 3).
  • Same number of points per path.
  • Same open/closed state (both open or both closed).

MotionKit validates compatibility when keyframes are added and shows a warning if shapes are incompatible. If they're incompatible, the shape will snap instantly instead of morphing.

Workflow

  1. Select a vector layer.
  2. Enable recording and set the playhead to the start time.
  3. The initial shape is captured as the first morph keyframe.
  4. Move the playhead to a later time.
  5. Edit the vector path in Figma — move points, adjust handles, reshape the path.
  6. MotionKit detects the vector change (via documentchange) and creates a morph keyframe.
  7. Preview to see the morph animation.

Tips

  • Match point count — for the smoothest morphs, make sure both shapes have the same number of anchor points. Add points to the simpler shape if needed.
  • Flatten booleans first — Boolean operations need to be flattened (Object → Flatten) before morphing.
  • Point order matters — Bézier interpolation happens point-by-point, so the order of points affects the morph direction. Try rotating the starting point if the morph looks twisted.
  • Morph easing — morph keyframes support the same easing presets and custom bezier curves as property keyframes.