skills.rest
j172
j172COMMUNITY
Explore all skills by this author →
Website𝕏@j172GitHub

animation-vocabulary

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

Updated Jul 30, 2026
Search Tags:#glossary#animation#transitions#motion design#easing#web animation#ui terminology
One-click install
npx skills add https://github.com/j172/bid --skill animation-vocabulary-j172
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: animation-vocabulary
Source: https://github.com/j172/bid/tree/main/agent/skills/animation-vocabulary
Command: npx skills add https://github.com/j172/bid --skill animation-vocabulary-j172

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Users often can describe what a web animation looks or feels like ("the bouncy thing when a popover opens") but don't know its proper name, making it hard to prompt an AI, brief a designer, or search for implementation guidance. ## Core Features & Use Cases - Reverse glossary lookup: Converts informal, feel-based descriptions of motion effects into exact terms like Pop in, Rubber-banding, Stagger, or Morph. - Disambiguation of close terms: Contrasts easily confused concepts such as Clip-path vs Mask or Shared element transition vs Layout animation so users pick the right word. - 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 glossary 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 name of an animation effect I can only describe?▼

Describe what you see or feel, such as springy, slides off, or draws itself in, and the glossary maps that sensation to the exact term. The best match is returned first with one or two close alternates when relevant.

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.

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

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

Does this skill help design or build animations?▼

No, it only names effects. It is a reverse-lookup glossary for finding the right term to use in prompts, specs, or conversations, not a tool for designing or implementing motion.

Related Skills

Explore More Design & Creative Skills→
HorusGoulHorusGoul
8

animation-vocabulary

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

Community
Basic
MediaAskeyDOJOMediaAskeyDOJO

interaction-design

Design and implement microinteractions and transitions using CSS, Framer Motion, and GSAP.

Community
Intermediate
James-GamboaJames-Gamboa

gsap-performance

Optimize GSAP animations by batching reads and writes to minimize reflows.

Community
Intermediate
emilkowalskiemilkowalski
34.1k

animation-vocabulary

Maps vague descriptions of motion effects to precise animation terminology.

Community
Basic