Morph
Animate one shape into another — outline, fill and effects together.
Morph turns this shape into a different shape over time. You give it one or more targets, keyframe Progress, and the outline travels between them.
It carries more than the outline. Fill colour, stroke, and the effects stack can blend across the morph too, so a blue square with a soft shadow can become a red star with a hard one in a single move.
When to reach for it#
- Icon transitions — a play button becoming a pause bar.
- Logo reveals where one mark becomes another.
- Chained sequences through several shapes in a row.
How it works#
The hard part of morphing is correspondence: deciding which point on the first shape becomes which point on the second. Get it wrong and the shape turns inside out on the way. Morph resamples both outlines to a shared point count and matches them by arc length, then finds the rotation offset that minimises total travel.
With several targets, Progress runs across the whole chain. Two targets means 0 is the source, 0.5 is the first target, and 1 is the second. Keyframe straight through and it passes cleanly through each shape.
Parameters#
The shapes to morph through, in order. They stay as layers — hide them if you do not want them drawn.
Position along the chain, 0 to 1. Keyframe this. Easing here does more for the feel than any other control — a linear morph looks mechanical.
How much of the target's appearance comes along. Off, only the outline morphs and the source keeps its own fill. On, fill, stroke and effects blend too.
Points used to resample each outline. More gives a truer intermediate shape on complex artwork and costs more per frame. Raise it if a detailed shape looks like it is losing corners mid-morph.
Lets the matcher rotate the correspondence to shorten the travel. Leave it on unless the shape is deliberately spinning as it morphs.
Recipes#
Play becomes pause
- Draw the play triangle.
- Draw the two pause bars as a single shape layer.
- Add Morph to the triangle and set the pause shape as the target.
- Hide the pause layer.
- Keyframe Progress from 0 to 1 over about 0.3 s and ease both keys.
Two separate bars against one triangle is a different topology, so the intermediate frames will do something inventive. That is usually fine at this speed. If it bothers you, draw the pause shape as one path with a notch instead of two separate bars.
Things that catch people out#
A shape with one hole morphing to one with three has no clean answer for the frames between. Speed hides it. So does drawing both shapes with matching structure.
Linear morphs read as mechanical because real shape change accelerates. Ease in and out on the Progress keys is the single biggest improvement available.
See also#
Something here wrong or missing? Tell us in the community.