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.
Four techniques get used for that, and only one is a morph. Play them together.
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.
That last sentence is the definition.
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 book is about how much. So the payoff has to be worth naming.
An interface that morphs tells you that the thing you clicked and the thing you got are the same object in a different state, not two different objects. A hamburger that becomes a cross says "this menu is now open, and the same control closes it". Two icons that trade places say "here is a different button".
That is a small thing on one icon and a large thing across a product. It is also why the technique is worth understanding properly rather than reaching for a library and hoping.
Two things get called morphing and are not, and the distinction matters later.
Path drawing, where a stroke draws itself in from nothing using stroke-dasharray, is
an animation of how much of a shape is visible. The shape does not change.
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.
Here is the whole problem in one sentence, and the next two chapters are spent unpacking it.
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.
Get that decision wrong and you get a shape that flips inside out halfway through. Nothing crashes, nothing errors. It just looks broken, and it looks broken on the user's device rather than on yours.
Before we can talk about the decision, we need to be precise about what a line even is to a browser. That is Part 1.