animation-vocabulary
Agent skill from emilkowalski/skills.
What it does
- Crossfade — if they simply fade over each other in the same spot.
- Shared element transition — if an element travels and transforms from one position into another.
- Fade in / Fade out — Element appears or disappears by changing opacity.
- Slide in — Element enters by sliding in from off-screen (left, right, top, or bottom).
- Scale in — Element grows from smaller to full size as it appears, often paired with a fade.
- Pop in — Element appears with a slight overshoot, like it bounces into place.
- Reveal — Content is uncovered gradually, often by animating a clip-path or mask.
Derived from the skill's own SKILL.md documentation · extracted 2026-07-23
Source
Repository: https://github.com/emilkowalski/skills
animation-vocabulary FAQ
What does the animation-vocabulary skill do?
Reverse-lookup glossary that turns a vague description of a web animation or motion effect into its exact term ("the bouncy thing when a popover opens" → Pop in; "the iOS rubber-band scroll" → Rubber-banding). Use when the user asks "what's it called when…", or describes a motion effect without knowing its name and wants the right word to prompt an AI or designer with. For naming an effect, not designing or building one. Crossfade — if they simply fade over each other in the same spot. Shared element transition — if an element travels and transforms from one position into another.
How do I install animation-vocabulary?
Run: npx -y skills add https://github.com/emilkowalski/skills --skill animation-vocabulary --agent claude-code — the source lives at github.com/emilkowalski/skills.
Maintain animation-vocabulary?
Let people know it's listed here — add the badge (live metrics, light/dark aware) or a plain link to your README or docs.
[](https://getagentictools.com/skills/emilkowalski-skills-animation-vocabulary?ref=badge) npx agentictools info skills/emilkowalski-skills-animation-vocabulary The second line is the CLI lookup for this page — handy in READMEs and docs.
