animation-vocabulary

Maps vague descriptions of web motion effects to precise animation terminology.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Designers and developers 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 exact term from a plain-language description. ## Core Features & Use Cases - Reverse glossary lookup: Converts sensory descriptions like "the bouncy thing when a popover opens" into exact terms such as Pop in or Rubber-banding. - Disambiguation of close terms: Contrasts easily confused concepts like Morph vs Crossfade vs Shared element transition so users pick the right word. - Curated glossary coverage: Spans entrances, sequencing, transforms, scroll effects, feedback, easing, springs, looping, polish, performance, and motion principles. - Use Case: A product manager writing a spec says "the iOS scroll that resists and snaps back" and receives the term Rubber-banding with a verbatim definition to paste into the ticket. ## Quick Start Ask the assistant what the animation is called when a popover grows out of the button that opened it, and receive the exact term with its definition.

Frequently Asked Questions about animation-vocabulary

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

FAQPage Schema
What is it called when an element bounces into place on a webpage?

That effect is called Pop in, where an element appears with a slight overshoot like it bounces into place. If the motion is physics-driven with overshoot and settling, the related spring term is Bounce.

How do I find the right name for a UI animation effect?

Describe what you see or feel in plain language, such as springy, slides off, or draws itself in. The glossary maps that sensation to an exact term like Stagger, Reveal, or Line drawing, quoted verbatim with a one-line definition.

What is the difference between a morph and a crossfade?

A Morph is one shape smoothly turning into another shape, like Dynamic Island. A Crossfade is one element fading out as another fades in at the same spot, with no shape transformation between them.

What is the iOS scroll effect that snaps back called?

It is called Rubber-banding, defined as resistance and snap-back when you drag past a boundary. It is the signature iOS overscroll feel when pulling content beyond its scroll limit.

Does this glossary cover animation performance terms?

Yes, it includes performance vocabulary such as frame rate, jank, dropped frames, compositing, will-change, and layout thrashing. It also covers principles like reduced motion, perceived performance, and hardware acceleration.

When should I not use this animation naming glossary?

Do not use it to design or build animations, since it only names effects rather than generating code or specs. If a term genuinely is not in the glossary, it says so instead of inventing one.