animation-vocabulary

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

Updated May 9, 2026
One-click install
npx skills add https://github.com/Aeonxuu/southtownslandservice_v2 --skill animation-vocabulary-aeonxuu
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: animation-vocabulary
Source: https://github.com/Aeonxuu/southtownslandservice_v2/tree/main/.agents/skills/animation-vocabulary
Command: npx skills add https://github.com/Aeonxuu/southtownslandservice_v2 --skill animation-vocabulary-aeonxuu

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Users often see a motion effect on the web but don't know its name, making it hard to search for, prompt an AI with, or brief a designer. This Skill turns a loose description like "the bouncy thing when a popover opens" into the exact term, such as "Pop in". ## Core Features & Use Cases - Reverse-lookup glossary: Matches feel-based descriptions ("springy", "slides off", "draws itself in") to authoritative animation terms across entrances, easing, springs, scroll, and performance. - Disambiguation of close terms: Contrasts competing terms like Morph vs Crossfade vs Shared element transition so the user can pick the right one. - Use Case: A user asks "What's it called when a popover grows out of the button you clicked?" and receives the term "Origin-aware animation" with a verbatim glossary definition to reuse in prompts or design specs. ## Quick Start Ask the AI what the animation is called when an element bounces slightly into place as it appears.

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 name of a UI animation effect I saw?▼

Describe what you see or feel, such as "slides off" or "draws itself in", and the glossary maps that sensation to the exact term. Close matches are listed with one-line differences so you can pick the right word.

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

A Morph is when one shape smoothly turns into another shape, like Dynamic Island. A Crossfade is when one element simply fades out as another fades in at the same spot, with no shape transformation.

What is the iOS rubber-band scroll effect called?▼

It is called Rubber-banding, the resistance and snap-back you feel when dragging past a scroll boundary. It is the signature iOS overscroll behavior.

When should I use spring animation terms instead of easing terms?▼

Use spring terms like stiffness, damping, and mass when motion is physics-driven rather than fixed-duration. Use easing terms like ease-out or cubic-bezier when the animation runs over a set duration with a defined speed curve.