Shape morphing animation
A morph is one shape flowing into another: a circle into a heart, a cloud into a bird, a letter into an object. It catches the eye precisely because nothing in nature does it — which also makes it one of animation's most playful tools.
How it works: matching the points
A morph pairs the points on two shapes and slides each point towards its partner. The entire quality of the result rests on that pairing. Mismatched points make the shape fold through itself and knot up mid-transition. A good engine first resamples both lines to the same number of points, then checks that they run in the same direction.
Reversed lines are the most common failure
If you drew the two shapes in opposite directions — one clockwise, one counter-clockwise — the line will pass through itself during the morph and produce a tangle. The fix is straightforward: check direction before pairing and reverse one set of points if needed. Working by hand, take care to start both shapes at the same place and draw them the same way round.
When the counts don't match
If the start has five lines and the end has three, two of them must disappear somewhere. The natural solution is to fade unmatched lines out — or in — gradually across the middle of the transition. Sudden disappearance is jarring. Colour should be interpolated the same way: a shape going from red to blue passes through purple.
Frequently asked questions
What's the difference between a morph and a tween?
A tween changes a shape's position, rotation and size while the shape stays the same. A morph changes the geometry, so the start and end can be different objects entirely. Technically a morph is a tween applied to the geometry.
Can complex drawings be morphed?
They can, but the result gets less predictable as the number of lines grows. The cleanest morphs happen when both shapes are built from a similar number of lines in a similar order. For elaborate transitions it's more controllable to split the drawing and morph each part separately.
How many in-between frames does a morph need?
Morphs like generous frame counts because the shape changes continuously, and stepping reads as more distracting than usual. Six to eight frames suit a short transition; twelve is a good start for a pronounced one.
The brush draws alive. Kipirti is a sketchbook for animation: draw frame by frame, compare with onion skin, and export a GIF or a video. It opens in the browser — nothing to install.
Try it in the browser Get it on Google Play