skills.rest
raphaelmans
raphaelmansCOMMUNITY
Explore all skills by this author →
GitHub

animation-vocabulary

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

Updated Sep 7, 2026
Search Tags:#css#glossary#animation#transitions#motion design#terminology#ui animation
One-click install
npx skills add https://github.com/raphaelmans/spectralpointengineering --skill animation-vocabulary-raphaelmans
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: animation-vocabulary
Source: https://github.com/raphaelmans/spectralpointengineering/tree/main/.skillshare/skills/animation-vocabulary
Command: npx skills add https://github.com/raphaelmans/spectralpointengineering --skill animation-vocabulary-raphaelmans

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Users 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 descriptions like "the bouncy thing when a popover opens" into the exact term (Pop in), quoting authoritative definitions verbatim. - Disambiguation of close terms: Contrasts easily confused concepts such as Clip-path vs Mask, Morph vs Crossfade, or Shared element transition vs Layout animation. - Comprehensive coverage: The glossary spans entrances, sequencing, transforms, transitions, scroll effects, feedback, easing, springs, looping, polish, performance, and design 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 precise definition to hand to engineering. ## Quick Start Ask the assistant what the animation is called when a thumbnail expands into a full card, and it will return 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 a popover grows out of the button that opened it?▼

That effect is called origin-aware animation. The element animates out of its trigger rather than from its own center, which is the default behavior in CSS.

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. Close matches are listed with one-line notes on how they differ.

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 resists and snaps back called?▼

That effect is called rubber-banding. It is the resistance and snap-back you feel when dragging past a scroll boundary, characteristic of iOS overscroll behavior.

Can this skill design or build the animation for me?▼

No, it only names effects. It identifies the correct term and definition so you know what to ask for, but designing or implementing the animation is outside its scope.

Related Skills

Explore More Design & Creative Skills→
HorusGoulHorusGoul
8

animation-vocabulary

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

Community
Basic
alfredo-iaalfredo-ia

animation-designer

Provide reusable Framer Motion and CSS animation patterns with code samples.

Official
Advanced
langgeniuslanggenius

animation-systems

Designs product-grade web motion systems with easing, choreography, and accessibility defaults.

Official
Intermediate
AO-HySAO-HyS

explain-interface

Explains how a website or visual effect was built from a URL or screenshot.

Official
Advanced