To get good animations from an AI you need to get good at telling it what you want:

• “stagger this list of items”
• “make this animation direction-aware”
• “spacial consistency”, “crossfade”, “layout animation”,

I made a motion vocabulary for this: https://t.co/ExAxpr31no https://t.co/SQXn2piA6r

Vocabulary

Source: https://animations.dev/vocabulary

#Animation Vocabulary

A glossary of common animation patterns taught in the course. Use these names to describe what you want when prompting an AI.

##Entrances & Exits

How elements appear and disappear.

• -Fade in / Fade out—Element appears or disappears by changing opacity.
• -Slide in—Element enters by sliding in from off-screen (left, right, top, or bottom).
• -Scale in—Element grows from smaller to full size as it appears, often paired with a fade.
• -Pop in—Element appears with a slight overshoot, like it bounces into place.
• -Reveal—Content is uncovered gradually, often by animating a clip-path or mask.
• -Enter / Exit—The animation an element plays when it’s added to or removed from the screen.

##Sequencing & Timing

Coordinating multiple elements or moments.

• -Keyframes—Defined points in an animation (0%, 50%, 100%) that the browser fills the gaps between.
• -Interpolation / Tween—Generating all the in-between frames between a start and end value, so motion is continuous.
• -Stagger—Animate several items one after another with a small delay between each, creating a cascade.
• -Orchestration—Deliberately timing multiple animations so they feel like one coordinated motion.
• -Delay—Time before an animation starts.
• -Duration—How long an animation takes.
• -Fill mode—Whether an element keeps its first or last frame’s styles before the animation starts or after it ends (e.g. forwards).
• -Stepped animation—An animation that is divided into discrete steps, like a countdown timer.

##Movement & Transforms

Changing an element’s position, size, or angle.

• -Translate—Move an element along the X or Y axis.
• -Scale—Make an element bigger or smaller.
• -Rotate—Spin an element around a point.
• -Skew—Slant an element along the X or Y axis, shearing it out of its rectangular shape.
• -3D tilt / Flip—Rotate in 3D space (rotateX / rotateY) to add depth.
• -Perspective—How strong the 3D effect looks — a lower value exaggerates depth, like the viewer is closer.
• -Transform origin—The anchor point a scale or rotation grows or spins from.
• -Origin-aware animation—An element animates out of its trigger, like a popover growing from the button that opened it instead of from its own center which is the default in CSS.

##Transitions Between States

Connecting one state, view, or element to another.

• -Crossfade—One element fades out as another fades in, in the same spot.
• -Continuity transition—A change that keeps the user oriented by visually connecting before and after. For example, making the same rectangle bigger and smaller.
• -Morph—One shape smoothly turns into another shape, e.g. Dynamic Island.
• -Shared element transition—An element travels and transforms from one position into another, like a thumbnail expanding into a card.
• -Layout animation—When an element’s size or position changes, it animates to the new spot instead of snapping.
• -Accordion / Collapse—A section smoothly expands and collapses its height to show or hide content.
• -Direction-aware transition—Content slides one way going forward and the opposite way going back, so navigation has a sense of direction.

##Scroll

Motion tied to scrolling or navigating between views.

• -Scroll reveal—Elements fade or slide into place as they enter the viewport.
• -Scroll-driven animation—An animation whose progress is tied directly to scroll position.
• -Parallax—Background and foreground move at different speeds while scrolling, creating depth.
• -Page transition—An animation that plays when navigating from one page or route to another.
• -View transition—The browser morphs between two states or pages, connecting shared elements.

##Feedback & Interaction

Responding to the user’s actions.

• -Hover effect—Visual change when the cursor moves over an element.
• -Press / Tap feedback—A subtle scale-down when an element is clicked, so it feels physical.
• -Hold to confirm—A progress effect that fills up while the user holds a button.
• -Drag—Moving an element by grabbing it, often with momentum when released.
• -Drag to reorder—Dragging items in a list to rearrange them, while the others shift to make room.
• -Swipe to dismiss—Dragging an element off-screen to close it, like a drawer or toast.
• -Rubber-banding—Resistance and snap-back when you drag past a boundary (the iOS overscroll feel).
• -Shake / Wiggle—A quick side-to-side jitter signaling an error or rejected input.
• -Ripple—A circle expanding from the point of a tap, confirming the press.

##Easing

How speed changes over an animation.

• -Easing—The rate at which an animation speeds up or slows down.
• -Ease-out—Starts fast, ends slow. The default for most UI and anything responding to the user.
• -Ease-in—Starts slow, ends fast. Usually avoided; can feel sluggish.
• -Ease-in-out—Slow, fast, slow. Good for elements already on screen moving from A to B.
• -Linear—Constant speed. Avoid for UI; reserve for spinners or marquees.
• -Cubic-bezier—A custom easing curve you define for precise control.
• -Asymmetric easing—A curve that accelerates and decelerates at different rates. Feels more alive than a symmetric one.

##Spring Animations

Physics-based motion as an alternative to fixed-duration easing.

• -Spring—Motion driven by physics (tension, mass, damping) rather than a set duration.
• -Stiffness / Tension—How strongly the spring pulls toward its target. Higher feels snappier.
• -Damping—How quickly a spring settles. Lower damping means more bounce and oscillation.
• -Mass—How heavy the animated element feels. More mass makes it slower and more sluggish.
• -Bounce—A spring that overshoots and settles, adding playfulness.
• -Perceptual duration—How long a spring feels finished, even though it keeps micro-settling underneath.
• -Momentum—Motion that carries velocity, especially after a drag or interruption.
• -Velocity—How fast and in which direction an element is moving. A spring carries it into the next animation when interrupted, so a flicked element keeps its speed.
• -Interruptible animation—An animation that can be smoothly redirected mid-flight instead of finishing first.

##Looping & Ambient Motion

Animations that run on their own.

• -Marquee—Text or content that scrolls continuously in a loop.
• -Loop—An animation that repeats, a set number of times or infinitely.
• -Alternate (yoyo)—A loop that plays forward then reverses each iteration, instead of jumping back to the start.
• -Orbit—An element circling around another in a continuous path.
• -Pulse—A gentle repeating scale or opacity change to draw attention.
• -Float—A gentle, continuous up-and-down drift that makes a static element feel alive and weightless.
• -Idle animation—Subtle motion that plays while an element is just sitting there, waiting to be interacted with.

##Polish & Effects

The small touches that separate good from great.

• -Blur—A blur filter used to soften an element or mask tiny imperfections.
• -Clip-path—Clipping an element to a shape, used for reveals, masks, and before/after sliders.
• -Mask—Hiding or revealing parts of an element using a shape or gradient — like clip-path, but with soft, fadeable edges.
• -Before / after slider—A draggable divider that wipes between two overlaid images to compare them.
• -Line drawing—An SVG path that draws itself in, like an invisible pen tracing it.
• -Text morph—Text that animates character by character when it changes, drawing attention to the new value.
• -Skeleton / Shimmer—A placeholder with a moving sheen shown while content loads.
• -Number ticker—Digits rolling or counting up to a value.
• -Tabular numbers—Fixed-width digits so numbers don’t shift around as they change. Essential for tickers, timers, and counters.
• -Typewriter—Text appearing one character at a time, as if being typed.

##Performance

What keeps motion smooth instead of stuttering.

• -Frame rate (FPS)—Frames drawn per second. 60fps is the baseline for smooth motion; 120fps on newer displays.
• -Jank—Visible stutter when the browser drops frames because it can’t keep up with the animation.
• -Dropped frame—A frame the browser missed its deadline to draw, causing a tiny hitch in motion.
• -Compositing—Letting the GPU move or fade an element on its own layer without redoing layout or paint.
• -will-change—A CSS hint that an element is about to animate, so the browser can promote it to its own layer ahead of time.
• -Layout thrashing—Animating properties like width, height, top, or left that force the browser to recalculate layout every frame, causing jank.

##Principles to Know

Concepts that guide when and how to animate.

• -Purposeful animation—Motion should serve a function — orient, give feedback, show relationships — not just decorate.
• -Anticipation—A small wind-up in the opposite direction before a move, hinting at what’s about to happen.
• -Follow-through—Parts of an element keep moving and settle slightly after the main motion stops, adding weight.
• -Squash & stretch—Deforming an element as it moves to convey weight, speed, and flexibility.
• -Perceived performance—The right animation makes an interface feel faster, even when it isn’t.
• -Frequency of use—The more often a user sees an animation, the shorter and subtler it should be.
• -Spatial consistency—Animating so an element keeps its identity and position across states, so users never lose track of where things went.
• -Hardware acceleration—Animating transform and opacity lets the GPU keep motion smooth.
• -Reduced motion—Respecting the user’s prefers-reduced-motion setting by toning down or removing motion.