animation-vocabulary

Identifies the correct technical term for a described UI motion effect.

Updated Aug 3, 2026
One-click install
npx skills add https://github.com/m-de-graaff/skills --skill animation-vocabulary-m-de-graaff
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: animation-vocabulary
Source: https://github.com/m-de-graaff/skills/tree/main/skills/animation-vocabulary
Command: npx skills add https://github.com/m-de-graaff/skills --skill animation-vocabulary-m-de-graaff

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? People often know what a motion effect looks or feels like but not what it is called, which makes it impossible to search for, request from a designer, or ask an AI to build. This Skill converts a vague description of an animation into the precise industry term. ## Core Features & Use Cases - Name lookup from plain descriptions: Maps sensations like "springy", "slides off", or "draws itself in" to terms such as spring, swipe to dismiss, or line drawing. - Disambiguation of close pairs: Distinguishes easily confused terms like clip-path vs mask, pop-in vs bounce, and shared element transition vs layout animation. - Comprehensive glossary: Covers entrances, sequencing, transforms, transitions, scroll effects, feedback, easing, springs, looping, polish, performance, and design principles. - Use Case: A user asks "what's it called when a popover grows out of the button you clicked?" and receives the answer "origin-aware animation" with a one-line definition. ## Quick Start Ask what the animation is called when an element bounces slightly into place as it appears on screen.

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 screen?▼

That effect is called pop-in, where an element appears with a slight overshoot and bounces into place. If the motion is driven by physics rather than a fixed duration, it is a spring animation with low damping.

What is the iOS scroll effect that resists and snaps back called?▼

That effect is called rubber-banding, where scrolling past a boundary meets resistance and then snaps back. It is the signature iOS overscroll behavior.

What is the difference between a morph and a crossfade?▼

A morph is one shape smoothly transforming into another shape, like the Dynamic Island. A crossfade keeps both elements in the same spot while one fades out and the other fades in.

What is the difference between a shared element transition and a layout animation?▼

A shared element transition is an element traveling and transforming between positions, like a thumbnail expanding into a card. A layout animation is when a size or position change animates smoothly instead of snapping.

Does this skill design or build the animation it names?▼

No, it only identifies the correct term for a described effect. Once the term is found, the animation-principles skill provides the values and rules for building it.