Every term, with a live example built from nothing but HTML, CSS, and a sprinkle of inline JavaScript. Hover, click, drag, and scroll the demos.
Terms & definitions adapted from animations.dev/vocabulary.
How elements arrive on screen and how they leave. Hover any demo marked ↻ to replay it.
Element appears or disappears by changing opacity.
Element enters by sliding in from off-screen (left, right, top, or bottom).
Element grows from smaller to full size as it appears, often paired with a fade.
Element appears with a slight overshoot, like it bounces into place.
Content is uncovered gradually, often by animating a clip-path or mask.
The animation an element plays when it's added to or removed from the screen.
The clockwork of animation: when things start, how long they take, and what fills the space in between.
Defined points in an animation (0%, 50%, 100%) that the browser fills the gaps between.
Generating all the in-between frames between a start and end value, so motion is continuous.
Animate several items one after another with a small delay between each, creating a cascade.
Deliberately timing multiple animations so they feel like one coordinated motion. Here: backdrop → panel → contents.
Time before an animation starts.
How long an animation takes.
Whether an element keeps its first or last frame's styles before the animation starts or after it ends. With none, the ball snaps back when done.
An animation that is divided into discrete steps, like a countdown timer.
The four primitives — translate, scale, rotate, skew — plus the third dimension. Most of these respond to hover.
Move an element along the X or Y axis.
Make an element bigger or smaller.
Spin an element around a point.
Slant an element along the X or Y axis, shearing it out of its rectangular shape.
Rotate in 3D space (rotateX / rotateY) to add depth.
How strong the 3D effect looks — a lower value exaggerates depth, like the viewer is closer.
The anchor point a scale or rotation grows or spins from.
Element animates from its trigger point rather than its own center, such as a popover expanding from the button that opened it.
Getting the interface from A to B without losing the user along the way.
One element fades out as another fades in, in the same spot.
A change that keeps the user oriented by visually connecting before and after.
One shape smoothly turns into another shape, e.g. Dynamic Island.
An element travels and transforms from one position into another, like a thumbnail expanding into a card.
When an element's size or position changes, it animates to the new spot instead of snapping. (Done here with the FLIP technique.)
A section that smoothly expands and collapses its height — this one uses the CSS grid-template-rows: 0fr → 1fr trick, no JS measurement needed.
A section smoothly expands and collapses its height to show or hide content.
Content slides one way going forward and the opposite way going back, so navigation has a sense of direction.
These demos have their own little scrollable viewports — scroll inside them.
Elements fade or slide into place as they enter the viewport.
The bar above and the square below are driven by scroll position, not time.
Scrub up and down — the animation runs backwards too.
Progress is just scrollTop / maxScroll.
That's the whole trick.
An animation whose progress is tied directly to scroll position.
Background and foreground move at different speeds while scrolling, creating depth.
Welcome back
An animation that plays when navigating from one page or route to another.
The browser morphs between two states or pages, connecting shared elements. Uses the real document.startViewTransition() — falls back to a snap in unsupported browsers.
Motion that responds to your hands — press, hold, drag, and fling these.
Visual change when the cursor moves over an element.
A subtle scale-down when an element is clicked, so it feels physical.
A progress effect that fills up while the user holds a button.
Moving an element by grabbing it, often with momentum when released — fling it!
Dragging items in a list to rearrange them, while the others shift to make room.
Dragging an element off-screen to close it, like a drawer or toast.
Resistance and snap-back when you drag past a boundary (the iOS overscroll feel). Drag the ball past the dashed edge.
A quick side-to-side jitter signaling an error or rejected input.
A circle expanding from the point of a tap, confirming the press.
The same movement can feel mechanical or alive — it's all in the acceleration curve.
The rate at which an animation speeds up or slows down. Hover and watch the four classic curves race.
Starts fast, ends slow. The default for most UI and anything responding to the user.
Starts slow, ends fast. Usually avoided; can feel sluggish.
Slow, fast, slow. Good for elements already on screen moving from A to B.
Constant speed. Avoid for UI; reserve for spinners or marquees.
A custom easing curve you define for precise control. This one — cubic-bezier(.65,-.4,.35,1.4) — winds up and overshoots.
A curve that accelerates and decelerates at different rates. Feels more alive than a symmetric one.
Every demo here runs on a tiny physics integrator (~20 lines of JS) — no durations, no easing curves.
Motion driven by physics (tension, mass, damping) rather than a set duration.
How strongly the spring pulls toward its target. Higher feels snappier.
How quickly a spring settles. Lower damping means more bounce and oscillation.
How heavy the animated element feels. More mass makes it slower and more sluggish.
A spring that overshoots and settles, adding playfulness.
How long a spring feels finished, even though it keeps micro-settling underneath.
Motion that carries velocity, especially after a drag or interruption.
How fast and in which direction an element is moving. A spring carries it into the next animation when interrupted.
An animation that can be smoothly redirected mid-flight instead of finishing first. Mash A and B.
Animations with no beginning or end — quiet background heartbeats that make a page feel alive.
Text or content that scrolls continuously in a loop.
An animation that repeats, a set number of times or infinitely.
A loop that plays forward then reverses each iteration, instead of jumping back to the start.
An element circling around another in a continuous path.
A gentle repeating scale or opacity change to draw attention.
A gentle, continuous up-and-down drift that makes a static element feel alive and weightless.
Subtle motion that plays while an element is just sitting there, waiting to be interacted with.
The finishing touches: reveals, shimmers, tickers, and typographic tricks.
A blur filter used to soften an element or mask tiny imperfections.
Clipping an element to a shape, used for reveals, masks, and before/after sliders.
Hiding or revealing parts of an element using a shape or gradient — like clip-path, but with soft, fadeable edges.
A draggable divider that wipes between two overlaid images to compare them.
An SVG path that draws itself in, like an invisible pen tracing it.
Text that animates character by character when it changes, drawing attention to the new value.
A placeholder with a moving sheen shown while content loads.
Digits rolling or counting up to a value.
Fixed-width digits so numbers don't shift around as they change. Essential for tickers, timers, and counters.
Text appearing one character at a time, as if being typed.
Why some animations glide at 60fps and others stutter — and how to stay on the fast path.
Frames drawn per second. 60fps is the baseline for smooth motion; 120fps on newer displays.
Visible stutter when the browser drops frames because it can't keep up with the animation. (Simulated here — your browser is innocent.)
A frame the browser missed its deadline to draw, causing a tiny hitch in motion.
Letting the GPU move or fade an element on its own layer without redoing layout or paint. Hover to peel the layers apart.
A CSS hint that an element is about to animate, so the browser can promote it to its own layer ahead of time — no first-frame hiccup.
Animating properties like width, height, top, or left that force the browser to recalculate layout every frame, causing jank.
Less vocabulary, more philosophy — the judgment calls behind motion that feels right.
Motion should serve a function — orient, give feedback, show relationships — not just decorate. This button's motion tells you exactly what's happening.
A small wind-up in the opposite direction before a move, hinting at what's about to happen.
Parts of an element keep moving and settle slightly after the main motion stops, adding weight. Watch the antenna.
Deforming an element as it moves to convey weight, speed, and flexibility.
The right animation makes an interface feel faster, even when it isn't. Both panels load in exactly 1.6s — which felt shorter?
The more often a user sees an animation, the shorter and subtler it should be.
Animating so an element keeps its identity and position across states, so users never lose track of where things went. The highlight travels — it never teleports.
Animating transform and opacity lets the GPU keep motion smooth.
Respecting the user's prefers-reduced-motion setting by toning down or removing motion — swap the bounce for a gentle fade. (This whole page honors it too.)