Home/Help/Animate/Shape morphing

ANIMATE

Shape morphing

A path's shape can be animated like any other property: its Morph track keeps the shape at each keyframe, and the editor blends the nodes between them. Morph into turns one shape into another in one go.

The blob grows points and flies into the star's place in a second and a half, holds there, and starts over.
WHAT YOU’LL MAKE

The blob grows points and flies into the star's place in a second and a half, holds there, and starts over. This one is the real exported SVG, playing.

Do it in the editor: guided tour6 steps · about 3 minutes · opens a practice scene

Step by step

  1. Select the blob

    Click the blob on the canvas, or its row in the Layers panel. The Morph section near the bottom of the inspector has what shapes can do: the node count, the Morph , Edit nodes and Morph into.

  2. Move the playhead to 1.5s

    Drag the red playhead along the time ruler to 1.5s. That is where the new shape will be.

  3. Morph into the star

    In the Morph section, open Morph into and pick Star. The blob gets a Morph track: its own shape at 0s, the star's at the playhead. The star layer is hidden, since the blob now becomes it.

  4. Click Edit nodes

    Click Edit nodes in the Morph section (it now reads Done editing). The blob's nodes show on the canvas, as they are at the playhead.

  5. Drag a node

    Drag the star's top point up. With a Morph track, moving a node changes the Morph keyframe at the playhead, or adds one when there is none there yet.

  6. Play it

    Press Space. The blob grows its points on the way to the star, holds the new shape until the end of the 3-second animation, and starts over.

Good to know. Shapes morph best when they have about the same number of nodes, in the same order: the editor adds nodes where one has fewer. Rectangles and ellipses become plain paths when they start morphing. Add nodes (subdivide) gives a shape more nodes to bend.

Keys

Shift MAdd a morph keyframe at the playhead
EscBack to the Select tool
SpacePlay and pause