Morph shapes

A morph animates a shape’s geometry: the outline itself travels from one form to another. An icon becomes a different icon, a blob settles into your logo, an underline flows up into a checkmark. Nothing about it is a crossfade — there is one shape on screen the whole time, and its points move.

This is different from every other kind of motion in Mixture. Position, scale, colour and filters animate what happens to a shape; a morph animates what the shape is.

What can morph

Morphing works on path layers — layers whose content is vector outline data. If you drew with the pen tool or an agent added a path layer, you’re ready.

Rectangles, rounded rectangles, polygons and stars are not paths yet: they’re parametric shapes described by width, height, corner radius and side count. Right-click one and choose Convert to path to turn it into editable outline data. The layer keeps its id, so any animations already pointing at it survive the conversion untouched — and its corner radii, side count and star inset all bake into the resulting outline.

Morph on the canvas

Select a path layer, right-click, and choose Morph to….

Three things happen at once: a morph operation is added starting at the playhead, the playhead jumps to the end of that morph, and you drop straight into the point editor on the target shape. So the shape you’re now dragging is exactly the shape you’re looking at — reshape it into whatever it should become, and press Esc to commit.

That’s the whole loop. Drag points, Escape, play it back.

To adjust it later, select the morph — from the animations list in the properties panel, or from its bar on the timeline — and the Morph section gives you Edit target shape and Edit source shape buttons that reopen the point editor on either endpoint. The playhead moves to that endpoint’s moment each time, so you’re always editing the shape you can see.

Editing points

Double-click a path layer to enter the point editor directly, without a morph. Drag anchor points and their bezier handles; the shape updates live.

Double-clicking a rectangle gets you a lighter version of the same idea: corners render as circles, and hovering an edge surfaces a midpoint “add point” dot. Click that dot and the rect converts to a path in place and drops you into full point editing — the implicit route to the same destination as the Convert to path menu item.

Strict and Resample

The Mode dropdown decides how the two outlines are matched up.

Strict interpolates control points directly. It’s the best quality when the two shapes are related — the same icon in two states, a logo opening up. Point counts are equalised for you, and winding direction and start point are auto-aligned so the shape doesn’t twist itself inside out on the way across.
Resample re-samples both outlines into a fixed number of evenly-spaced points (Samples, default 96) and interpolates those. Slightly softer fidelity, but it works on nearly any pair of shapes. If Strict reports a topology mismatch, switch to Resample.

Both modes need the two shapes to agree on structure: the same number of subpaths (separate M commands), each matching in open/closed state. A one-piece blob can’t morph into a two-piece equals sign in a single operation — use two morphs, or redraw one of the endpoints.

Raising Samples buys accuracy on detailed artwork and costs a little performance; lowering it smooths fussy outlines deliberately.

Chaining morphs

A layer can carry several morphs in sequence — A → B → C. There’s one rule, and it’s the one people trip on:

Every morph after the first must set its source shape explicitly. A morph with no source defined starts from the layer’s own static authored path, so the second morph in a chain would snap back to the original shape before running. Use Edit source shape on each subsequent morph and match it to the previous morph’s target. (It’s the same discipline as matching from and to across sequential property animations.)

One coordinate frame for the whole chain

All of a layer’s morph endpoints share one fixed coordinate frame for the entire scene: the union of every endpoint’s bounding box is fitted to the layer box once, and stays put. That’s what stops the shape jumping in size between steps.

The practical consequence: author every endpoint at the same coordinate scale as the layer’s own path. A target drawn across a 0–1000 space next to a source drawn across 0–100 will render the small shapes as specks. If a morph looks unexpectedly tiny, mismatched endpoint scale is almost always why.

What a morph does and doesn’t touch

A morph moves geometry only. Fill, gradient, stroke colour, stroke width — all stay live and independently animatable throughout. That’s the good part: run a fill colour animation across the same window and the shape changes form and colour together.

Pair a morph with a Liquid filter over the same window and you get the metaball / mercury feel that reads as one substance flowing, rather than one outline sliding.

A few things to avoid while a morph is in flight:

Draw-on entrances and tapered stroke profiles measure themselves against the layer’s static path, so they’ll be wrong mid-morph. Draw the line on first, then morph it.
Polygon and star shifts — triangle to hexagon, a star’s points sharpening — are simpler and cleaner as animations on the shape’s sides and innerRadius properties. Reach for a morph when the artwork is real vector art that those two dials can’t express.

Ask an agent

Morphing is documented to connected agents in full, and it’s one of the things they’re genuinely good at — because the hard part is authoring two path strings that share a topology, which is exactly the kind of work you don’t want to do by dragging points.

“Morph the play icon into a pause icon over 0.4 seconds at the beat.”
“Convert this rounded rect to a path and morph it into our logo mark as the headline lands.”
“Make the underline flow into a checkmark when the form validates — liquid filter over the same window.”

An agent can also chain the morphs correctly, which is the part that’s fiddly by hand.