animation-vocabulary

Maps vague descriptions of web motion effects to their exact animation terminology.

Updated Jul 3, 2026
One-click install
npx skills add https://github.com/alex-jordan547/agent-setup --skill animation-vocabulary-alex-jordan547
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: animation-vocabulary
Source: https://github.com/alex-jordan547/agent-setup/tree/main/archive/animation-vocabulary
Command: npx skills add https://github.com/alex-jordan547/agent-setup --skill animation-vocabulary-alex-jordan547

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Users often know what a motion effect looks or feels like but not its proper name, making it hard to prompt an AI, brief a designer, or search for implementation guidance. This Skill reverse-looks-up the precise term from a plain-language description. ## Core Features & Use Cases - Reverse glossary lookup: Converts descriptions like "the bouncy thing when a popover opens" into exact terms such as Pop in or Rubber-banding. - Disambiguation of close terms: Contrasts similar concepts (Clip-path vs Mask, Morph vs Shared element transition) so users pick the right word. - Curated glossary coverage: Spans entrances, sequencing, transforms, transitions, scroll, feedback, easing, springs, looping, polish, performance, and motion principles. - Use Case: A user asks "what's it called when an iOS scroll resists and snaps back?" and receives the term Rubber-banding with its authoritative definition. ## Quick Start Ask what the effect is called when a thumbnail smoothly expands into a full card when tapped.

Frequently Asked Questions about animation-vocabulary

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I find the name of a web animation effect I can only describe?

Describe what the effect looks or feels like in plain words, such as springy or slides off. The glossary maps that sensation to the exact term, like Pop in for a bouncy entrance or Rubber-banding for iOS overscroll resistance.

What is the difference between a morph and a shared element transition?

A morph is one shape smoothly turning into another shape, like Dynamic Island. A shared element transition is an element traveling and transforming from one position into another, like a thumbnail expanding into a card.

What is the iOS scroll bounce effect called?

It is called rubber-banding: resistance and snap-back when you drag past a boundary, the familiar iOS overscroll feel. It belongs to the feedback and interaction category of motion effects.

When should I use a spring animation instead of easing?

Springs use physics parameters like stiffness, damping, and mass rather than a fixed duration, producing motion that can be interrupted and redirected mid-flight. Easing curves like ease-out suit simple, fixed-duration UI transitions.

What happens if an animation term is not in the glossary?

The Skill names the closest matching term and states plainly that it is an approximation, or describes the effect using existing glossary vocabulary. It does not invent new terms outside the curated list.