Motion & Animation

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