A hamburger menu icon that becomes a cross when you open the menu. You have seen it a thousand times, and most of the time it was faking it.
By the end of this page you will be able to look at any icon animation and say which of four techniques it used, and why only one of them earns the word morph. That sounds like a small thing to learn. It is the distinction the rest of these ten parts rests on, and almost nobody who ships an icon animation can make it.
Four techniques, then. Play them one at a time and decide which one is the real morph before you read on.
Which one is the real morph?
Those four tiles are these four techniques, in the same order.
Swap replaces one icon with another. Nothing animates, which is fine and honest, and it is what most sites ship.
Crossfade stacks both icons and trades their opacity. There is a moment in the middle where you can see five strokes at once, because both icons are on screen at 50%. It reads as a dissolve, and at small sizes it reads as a smudge.
Transform rotates, scales or translates the whole icon as one rigid object. The geometry never changes, so a hamburger stays a hamburger no matter how far you spin it. It happens to work here because a rotated middle bar looks a little like an X, and it falls apart the moment the two icons are not related by a rotation.
Morph changes the geometry. At the halfway point there is exactly one shape on screen, and it is neither icon. It is a real shape that has never existed before and will not exist again once the animation ends.
A morph interpolates one shape's geometry into another's, so every frame is a real shape rather than a blend of two pictures.
Crossfade and transform are cheap. Morphing costs real work, and the rest of this manual is about how much. So the payoff has to be worth naming.
A morph says the thing you clicked and the thing you are looking at now are the same object, in a different state. Swap two icons instead and you have said something else, that one button left and another arrived. Both read instantly and neither is subtle: a hamburger that turns into a cross is telling you the control that opened this will close it, and two icons trading places are telling you nothing of the kind.
On one icon that is a detail. Across a product it is the difference between an interface that holds together and one that flickers, which is why it is worth understanding rather than installing and hoping.
Two things get called morphing and are not, and the distinction matters later.
Path drawing is the one where a line appears to draw itself, and the trick is : the line was always there, and what you are watching is how much of it is uncovered. Its shape never changes. So it is not a morph, though Part 8 makes the case for reaching for it anyway, more often than this section makes it sound.
Shape tweening between two SVGs by fading their fills, which some tools export, is crossfade with extra steps.
If the shape at the midpoint is not a real shape, it is not a morph.
A hamburger is three horizontal lines. A cross is two diagonal ones. To morph, something has to decide which line becomes which line, and what the third one does when there is nothing left for it to become.
Decide it wrong and the shape turns itself inside out halfway across. You get no error and no warning, because as far as the browser is concerned it did exactly what you asked, so the first you hear of it is on somebody else's screen.
That decision is the whole subject of Part 2. Before it can be made, though, we need to be precise about what a line even is to a browser, which is Part 1 and the shorter of the two problems.
Why a crossfade is not a morph, and why the difference is visible.
You will need it in Part 2.