Icon morph
When an icon changes state – outline to fill, play to pause, menu to close – the change is animated with three properties and one curve. Path morphing is a party trick.
Both icons stay in the DOM, one absolutely on top of the other. The entering icon comes from opacity 0, scale 0.25 and 4px of blur to full; the exiting one goes the other way. 300ms, `cubic-bezier(0.2, 0, 0, 1)`, and because they are transitions rather than keyframes a change of mind halfway through reverses cleanly.
- Opacity 0→1, scale 0.25→1, blur 4px→0
- 300ms; springs at duration 0.3 with bounce 0 if a library is in play
- Outline is default, fill is active; the swap is the state signal
When not to: an icon that changes every keystroke. High-frequency changes get an instant swap.