animating-icons
Installation
SKILL.md
Animating Icons
An icon is not a picture you move. It is an object that does something, and the animation is that thing happening once.
Core principle: the gesture is the icon's meaning acting on itself. A bell rings, a plug disconnects, a package lands. The motion has to be something only that object could do. Whole-<svg> shakes that would look identical on any glyph are decoration — delete them.
Read next
| Situation | Open |
|---|---|
| Hover gesture on one glyph | references/FAMILIES.md, then references/EXAMPLES.md |
| Shape itself bends (book, hand, flap) | references/MORPH.md |
| Icon A becomes icon B (menu↔cross) | references/ICON-MORPH.md |
| Authoring CSS / SVG / driver | references/TECHNIQUE.md + references/FAILURES.md |
| Fill (Phosphor-style) ink | references/FILL.md |
| Easing / peak speed | references/EASING.md |
| Done coding | references/VERIFY.md + scripts/verify-icon.mjs |