skills.rest
leonardoacosta
leonardoacostaCOMMUNITY
Explore all skills by this author →
GitHub

animation-vocabulary

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

Updated Aug 2, 2026
Search Tags:#css#glossary#animation#ui design#motion design#terminology#reverse lookup
One-click install
npx skills add https://github.com/leonardoacosta/skills --skill animation-vocabulary-leonardoacosta
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: animation-vocabulary
Source: https://github.com/leonardoacosta/skills/tree/main/leo-design/skills/animation-vocabulary
Command: npx skills add https://github.com/leonardoacosta/skills --skill animation-vocabulary-leonardoacosta

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 impossible 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 precise term ("Pop in") so the user can communicate clearly. ## Core Features & Use Cases - Reverse-lookup glossary: A complete in-context glossary of animation terms covering entrances, easing, springs, scroll effects, feedback, and performance, quoted verbatim for consistency. - Disambiguation heuristics: Rules for telling apart commonly confused terms such as Morph vs Crossfade vs Shared element transition, or Jank vs Interruptible animation. - Use Case: A user asks "what's it called when an iOS scroll resists and snaps back?" and receives the answer "Rubber-banding" with a one-line definition, ready to use in a prompt or design brief. ## Quick Start Ask the assistant what the animation is called when a popover grows out of the button that opened it.

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

Describe what the motion looks or feels like, such as "slides off screen" or "bounces into place", and the glossary maps that sensation to the exact term like Swipe to dismiss or Pop in. Close matches are listed with one-line distinctions.

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

A Morph continuously reshapes one shape into another with no gap, like Dynamic Island. A Crossfade is an opacity swap where one element fades out as another fades in at the same spot, with no shape continuity.

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

It is called Rubber-banding: resistance and snap-back when you drag past a boundary, the signature iOS overscroll feel. A generic spring settling without a boundary is just Spring behavior, not rubber-banding.

Does this skill design or implement animations?▼

No. It only names effects. Once you have the right term, implementation is handed off to other resources such as motion-and-transitions for CSS patterns or apple-fluid-interfaces for spring physics.

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

The skill says so plainly rather than inventing a name. It names the closest matching term, flags it as an approximation, or describes the effect using existing glossary vocabulary like "a stagger of scale-in entrances".

Related Skills

Explore More Design & Creative Skills→
automatedigitalautomatedigital
1

website-to-hyperframes

Convert public websites into animated video content with automated capture and production.

Official
Advanced
xzedmxzedm

animate

Implements UI animations by deciding purpose, tool, properties, easing, and duration before writing code.

Community
Intermediate
trungenglishtrungenglish
1

apple-design

Implements Apple-style fluid interfaces with spring animations, gesture tracking, and translucent materials for the web.

Community
Intermediate
HorusGoulHorusGoul
8

animation-vocabulary

Identify precise web animation and motion effect terms from vague descriptions.

Community
Basic