Motion & Animation

Busted

• @starting-style / transition-behavior: allow-discreteThe modern CSS pair that lets dialogs, popovers, and display-none elements animate both as they appear and as they disappear.
• 3D tilt (perspective hover)A card that tips in 3D as the pointer moves across it, making a flat surface feel like a physical object.
• Animation directionThe route through a loop: forward, backward, or ping-ponging between the two so it returns without a jump.
• Attention seeker (pulse, shake, jiggle)A quick pulse, shake, or jiggle that pulls the eye toward an error, update, or action that needs attention.
• Blur-inAn entrance that starts hazy and transparent, then sharpens into focus as it becomes fully visible.
• Count-up / rolling-number animationNumbers that count upward or roll like an odometer until they land on the final value, often used for totals, scores, and stats.
• Crossfade (dissolve)Two elements overlap while one fades out and the other fades in, so the swap reads as a blend instead of a cut.
• CSS animationCSS playing a named keyframe sequence on its own: no state change needed, and it can loop, reverse, or pause.
• CSS transitionCSS smoothing out a property change between two states, so a hover or class toggle glides instead of snapping.
• Cursor followerA custom dot or ring that chases the pointer with a little lag, creating the soft mouse-following effect seen on creative sites.
• DelayA pause between the trigger and the motion starting. The lever behind staggered lists and tooltips that ignore accidental hovers.
• Draw-on (stroke-dashoffset)An SVG line that reveals itself from one end to the other, as if a pen is drawing the path live.
• DurationHow long one run of an animation takes, start to finish. The single number that decides whether a UI feels snappy or sluggish.
• Easing functionThe speed curve of a motion: whether it starts slow, ends slow, or plods along at one robotic pace.
• Elastic easing / back easingTiming that dips or shoots past the target before settling, once for back easing and several times for elastic easing.
• Enter/exit transitionAnimating an element as it appears and, the hard half, keeping it alive long enough to animate before it is removed.
• Fill modeThe rule that decides whether an animation's first or last pose sticks before it starts or after it ends.
• Inertia animationThe glide after you let go: release speed carries the object forward, then friction gradually brings it to rest.
• Inertial scrollingJavaScript easing the page's scroll position so it glides and coasts, a heavier authored version of the momentum touch scrolling already has.
• Interpolation (tweening)The math that fills the gap between two values so an element moves through every step from A to B instead of snapping.
• Interruptible animationAnimation that can be redirected mid-flight: a second click continues from where the element is now instead of snapping back to restart.
• Intrinsic-size animationAnimating a panel open to whatever height its content happens to be, no hardcoded pixels. The 'animate to height auto' problem.
• Iteration countThe repeat dial for an animation: once, a fixed number of loops, part of a loop, or forever.
• KeyframesThe named checkpoints of an animation: what it looks like at 0%, 50%, 100%, with the browser filling in everything between.
• Layout animation (FLIP technique)Making elements glide to their new positions when the layout changes, instead of teleporting there on the next frame.
• Magnetic hoverA button that drifts a few pixels toward the nearby cursor, as though the pointer is gently pulling it.
• Marquee (infinite ticker)A row of text, logos, or cards that travels sideways forever and wraps back to the start without a visible gap.
• Mask reveal (clip-path wipe)A reveal where a moving edge or growing shape uncovers content, like lifting a curtain instead of fading the content in.
• MorphOne shape continuously bending into another instead of swapping: the hamburger lines folding into an X.
• Motion path (offset-path)A route an element follows through curves, arcs, or loops instead of taking a straight line between two points.
• Motion tokensShared names for a product's standard speeds and curves, so every component moves like it belongs to the same system.
• Overshoot / anticipationMotion that winds up before it launches and sails slightly past its target before settling. The trick that makes UI feel alive.
• Page transitionThe choreographed exit and entrance when you navigate: the old page leaves, the new one arrives, no hard flash in between.
• ParallaxLayers moving at different speeds as you scroll, so the background drags behind the foreground and the page fakes depth.
• Pinned sectionA section that sticks in the viewport while you keep scrolling, so the scroll drives what happens inside it.
• Playback controlsThe transport bar for motion: pause it, resume it, run it backward, jump to a moment, or change its speed.
• Pop-inA quick entrance that grows from small, slips just past full size, and settles with a tiny snap.
• Preloader (intro sequence)A branded loading layer that plays before the main experience is revealed, useful only when real assets must become ready first.
• Scroll progress indicatorA bar or ring that fills as you move down the page, showing how much of the current content remains.
• Scroll snapScrolling that clicks into place at section or card boundaries instead of stopping wherever your finger let go.
• Scroll-driven animation (CSS scroll and view timelines)Motion whose playhead follows page or viewport progress, so the scrollbar controls what frame you see.
• Scroll-linked animation (scrubbing)Animation progress wired straight to scroll position, so scrolling down plays it and scrolling back up rewinds it.
• Scroll-triggered revealAn element sits hidden until it scrolls into the viewport, then plays its entrance once, usually a short fade and rise.
• Scroll-velocity skewElements lean or stretch more when you scroll faster, then relax back to normal when scrolling stops.
• ScrollytellingA story told through scrolling, usually with text chapters moving past a sticky visual that changes at each beat.
• Shared element transitionThe same element visually travels and morphs from one screen to the next, so a thumbnail grows into the full page.
• Split text (per-character animation)Text broken into letters, words, or lines so each piece can animate separately, usually as a staggered reveal.
• Spring animationMotion tuned with physics (stiffness, damping, mass) instead of a duration and a curve, so it settles like a real object.
• Squash and stretchA shape stretches as it moves and flattens on impact, making speed, softness, and weight visible.
• StaggerThe same animation on a row of siblings, each starting a beat after the last, so the group cascades instead of moving as one block.
• Text scramble (decode effect)Letters flicker through random symbols before locking into the real words, like a message being decoded in front of you.
• Timeline / orchestrationA conductor's score for motion: many animations sequenced with relative offsets, so B can start before A has finished.
• Transform originThe pin a transform moves around: center for a spin, edge for a hinge, or a corner for something that unfolds.
• View Transitions APIA browser API that snapshots the old and new DOM, then animates between them, so navigation morphs with no animation library.

The territory

26 core terms mapped for this field, ranked by how often builders reach for them. Each one is a future entry. Want to bust one? One entry, one file, one pull request.

• Easing functionSpeed curve making motion accelerate and decelerate instead of linear"cubic-bezier" · "the speed-up slow-down thing" · "make it not feel robotic"
• DurationTotal time required for one animation cycle"how long it takes" · "animation speed setting"
• DelayWaiting period before an animation starts"wait before it starts" · "start it a bit later"
• CSS transitionInterpolates property changes when an element enters a new state"hover animation with transition" · "just make it fade with CSS"
• CSS animationRuns keyframe sequences independently of property-change triggers"@keyframes animation" · "looping animation in CSS"
• KeyframesNamed waypoints defining values at percentages through an animation"define the steps of the animation" · "middle position, not just start and end"
• Interpolation (tweening)Calculates intermediate values between defined animation states"tween between two values" · "fill in the in-between frames"
• Spring animationPhysics motion tuned by stiffness, damping, mass; overshoots naturally"bouncy like iOS" · "springy settle"
• StaggerSame animation on siblings with an incremental delay each"one after another, not all at once" · "cascading list"
• Enter/exit transitionAnimating elements on mount and, harder, before unmount"make it animate out too, not just in" · "it disappears instantly instead of fading"
• Crossfade (dissolve)One element fades out as another fades in, overlapping"dissolve between images" · "one fades out while the next fades in"
• Scroll-triggered revealElement animates once it enters the viewport"fades up when you scroll to it" · "appears as you go down"
• Scroll-linked animation (scrubbing)Progress tied to scroll position; scrolling back rewinds it"scroll controls it like a slider" · "scroll forwards and backwards through it"
• Pinned sectionSection sticks in place while content animates through scroll"the page freezes while stuff changes" · "sticky section that plays"
• ParallaxLayers move at different speeds to fake spatial depth"background moves slower than the foreground" · "layered depth on scroll"
• Layout animation (FLIP technique)Element smoothly slides between old and new layout positions"it glides when the list reorders" · "things jump instead of moving"
• Shared element transitionSame element visually morphs across states, routes, or pages"the thumbnail grows into the full page" · "magic move"
• View Transitions APINative browser crossfade or morph between DOM states and pages"native page transitions without a library" · "app-like navigation in the browser"
• Page transitionChoreographed exit and enter when navigating between routes"smooth navigation instead of a hard cut" · "the wipe between pages"
• Timeline / orchestrationSequencing multiple animations with relative offsets and overlaps"chain them so B starts before A finishes" · "conduct the whole sequence"
• Overshoot / anticipationMotion passes its target then settles; wind-up before moving"goes a bit too far then comes back" · "pulls back before it launches"
• Interruptible animationNew input redirects motion from current position and velocity"doesn't restart when you click again mid-animation" · "catches it in flight"
• Intrinsic-size animationAnimating open/close to content height without hardcoded pixels"auto-height animation" · "animate to height auto"
• Scroll snapScrolling locks to section or card boundaries"it clicks into place per section" · "full-screen sections that lock"
• Inertial scrollingJS-eased scrolling with weight, glide, and momentum"smooth scroll with lerp" · "heavy buttery scroll like award sites"
• MorphOne shape or icon continuously deforms into another"hamburger turning into an X" · "the shape bends into the other shape"

Deeper in the field

• Motion path (offset-path) Element travels along a defined curve rather than straight
• Blur-in Element resolves from blurred to sharp while fading in
• Pop-in Quick scale-up from small with slight overshoot on appear
• Squash and stretch Deforming volume along the motion axis to imply weight
• Elastic easing / back easing Curves that bounce or dip past the target before settling
• Motion tokens Reusable named durations and curves shared across a design system
• Scroll progress indicator Bar or ring reflecting how far down the page you are
• Scroll-velocity skew Elements skew or stretch proportionally to scroll speed
• Magnetic hover Button subtly pulls toward the cursor within a radius
• 3D tilt (perspective hover) Card rotates in perspective following pointer position
• Cursor follower Custom dot or ring trailing the pointer with lag
• Count-up / rolling-number animation Digits animate upward or roll to a final value
• @starting-style / transition-behavior: allow-discrete CSS enabling entry animations for popovers, dialogs, and display changes
• Attention seeker (pulse, shake, jiggle) Short looping or one-shot motion drawing focus or signalling error
• Text scramble (decode effect) Characters cycle through random glyphs before resolving to words
• Preloader (intro sequence) Branded animated hold that plays before first paint reveals
• Scrollytelling Narrative where scroll position drives a sticky visual's story
• Split text (per-character animation) Text broken into chars, words, or lines for staggered reveal
• Marquee (infinite ticker) Content loops sideways forever with a seamless wrap
• Draw-on (stroke-dashoffset) SVG stroke appears progressively, as if being drawn
• Mask reveal (clip-path wipe) Content revealed by an expanding shape or moving edge
• Transform origin Pivot point used for rotation, scaling, and related transforms
• Iteration count Controls how many times an animation repeats
• Fill mode Determines which keyframe styles persist outside active playback
• Animation direction Plays iterations forward, backward, or alternating between both
• Scroll-driven animation Animation controlled by scroll or viewport progress timelines
• Inertia animation Continues from release velocity while gradually slowing through friction
• Playback controls Pause, resume, reverse, seek, or change an animation's speed