Animation Vocabulary

Animation Vocabulary turns a loose description of a motion effect into a precise term. It works as a reverse lookup: describe what an element appears to do or how its movement feels, and the skill maps that intent to a curated glossary. Its naming approach follows Emil Kowalski's animation philosophy. The purpose is to help you know what to ask for when a visual effect is familiar but its technical name is not.

Copyright Emil Kowalski; the MIT license is retained in LICENSE.

The glossary covers entrances and exits such as Fade in / Fade out, Slide in, Scale in, Pop in, Reveal, and Enter / Exit. It separates effects that can look similar: Scale in grows an element toward its full size, while Pop in adds a slight overshoot. Sequencing vocabulary includes Keyframes, Interpolation / Tween, Stagger, Orchestration, Delay, Duration, Fill mode, and Stepped animation. These distinguish a cascade of individually delayed items from the broader coordination of multiple animations.

Movement terms cover Translate, Scale, Rotate, Skew, 3D tilt / Flip, Perspective, and Transform origin. Origin-aware animation describes an element growing out of its trigger, such as a popover emerging from its button rather than its own center. State changes have their own vocabulary: Crossfade, Continuity transition, Morph, Shared element transition, Layout animation, Accordion / Collapse, and Direction-aware transition. A shape becoming another shape differs from an element moving and transforming between positions, or an existing layout changing smoothly instead of snapping.

Scroll-related entries include Scroll reveal, Scroll-driven animation, Parallax, Page transition, and View transition. They distinguish movement triggered by entering the viewport from progress directly tied to scroll position. Interaction entries cover Hover effect, Press / Tap feedback, Hold to confirm, Drag, Drag to reorder, Swipe to dismiss, Rubber-banding, Shake / Wiggle, and Ripple. Resistance and snap-back beyond a drag boundary, for example, maps to Rubber-banding.

Easing vocabulary explains changing speed through Ease-out, Ease-in, Ease-in-out, Linear, Cubic-bezier, and Asymmetric easing. The glossary presents ease-out as the default for most responsive interface motion, ease-in-out for elements already moving on screen, and linear movement for cases such as spinners or marquees. Spring vocabulary instead describes physics-based movement through Stiffness / Tension, Damping, Mass, Bounce, Perceptual duration, Momentum, Velocity, and Interruptible animation. It connects lower damping with greater oscillation, higher stiffness with a snappier pull, and greater mass with slower movement.

Ambient effects include Marquee, Loop, Alternate (yoyo), Orbit, Pulse, Float, and Idle animation. Polish terms include Blur, Clip-path, Mask, Before / after slider, Line drawing, Text morph, Skeleton / Shimmer, Number ticker, Tabular numbers, and Typewriter. Clip-path and Mask receive separate treatment because a mask can have soft, fadeable edges. Tabular numbers describe fixed-width digits that keep counters and timers from shifting as values change.

Performance vocabulary covers Frame rate (FPS), Jank, Dropped frame, Compositing, will-change, and Layout thrashing. The glossary connects GPU compositing with moving or fading a separate layer, and layout thrashing with repeatedly recalculating layout while animating properties such as width or height. Its principles include Purposeful animation, Anticipation, Follow-through, Squash & stretch, Perceived performance, Frequency of use, Spatial consistency, Hardware acceleration, and Reduced motion. These provide language for discussing both an effect's appearance and its role in an interface.

Use this skill when you can describe an animation but need its name: a popover growing from its trigger, several items entering in a cascade, or scrolling that resists and snaps back. It also helps when two terms seem plausible and you need to choose between them, including Clip-path versus Mask, Pop in versus Bounce, or Shared element transition versus Layout animation.

Keep the scope to naming and explanation within this glossary. When no entry matches exactly, the skill should identify the closest approximation or combine existing terms, while saying plainly that the fit is approximate. It should acknowledge a missing term rather than invent one. The mode produces advice only; it should not edit project files or install dependencies. User requirements, project conventions, keyboard alternatives, and accessibility take precedence over its opinionated starting points. Before shipping motion, check final visible states and reduced-motion behavior; verify any API guidance against installed versions and official documentation.

The input is a natural-language description of what a user sees or feels, rather than a required technical keyword. The response leads with the matching term and uses its glossary definition verbatim. If multiple entries fit, the best match comes first, followed by one or two alternatives with a short explanation of the difference. Answers stay concise unless more explanation is requested.

An invocation without a specific question has a dedicated readiness-only response and waits for a question before offering other information. Once a naming question arrives, the skill reads for intent and sensation, then returns the relevant vocabulary rather than an extended essay.