How icon morphingactually works

A hamburger becoming a cross looks like one of the simplest animations on the web. It is not. Something has to decide which line becomes which line, and every approach to that question leads somewhere different.

Ten parts, front to back, ending with enough to go and build it yourself. Every number on this site was produced by the compiler that lives in the repo.

Swapno animation

Crossfadetwo icons, opacity

Transformrotate the whole thing

Morphthe geometry itself

One pair, four techniques, same 500ms.

Start at Part 0 See all ten parts

Not a package, and nothing here is published to npm. The implementation is in lib/morph, MIT, meant to be read and copied.