Fade in / Fade out
Element appears or disappears by changing opacity.
Reference
Motion Cook Book
The exact word for the thing you can picture but can't name. Every term you'd say to a designer, write in a brief, or give a coding agent — and wherever the bench can show you one running, a link straight to it.
85 of 91 terms demonstrated live
91 terms
Entrances & Exits
How elements appear and disappear.
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.
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.
Fill mode
Whether an element keeps its first or last frame's styles before the animation starts or after it ends (e.g. forwards).
See itSigil
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.
See itPasscode
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.
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.
See itCrossing
Feedback & Interaction
Responding to the user's actions.
Hover effect
Visual change when the cursor moves over an element.
See itLightRaysDotFieldWorldMap ASCIIConstellationPlusGridTuringQuicksilverMyceliumContourMoireFlockFieldCausticsVoronoiShatterVariableProximityScrambleTextMoltenNeonRimeAnaglyphPixelTransitionBorderGlowSpotlightShellHoverListMagneticButtonShadowCursorTorchlightTiltApproachHolofoilUnfoldMagneticDockSwarmMirageSubmergeTelemetryGrid HorizonDepth StageEclipse FlareTidalLiquid Chrome
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.
See itReorder
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-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.
See itAperture
Linear
Constant speed. Avoid for UI; reserve for spinners or marquees.
Cubic-bezier
A custom easing curve you define for precise control.
See itApproach
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.
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.
See itWavesGrainientLightRaysSideRaysStrandsRibbonsWorldMap ASCIIConstellationPlusGridBarcodeAuroraStarfieldCindersShadowflameCathodeTuringQuicksilverMyceliumContourRainglassStipplePrismFerrofluidLissajousMoireDitherSakuraTreeFlockFieldCausticsVoronoiShatterMorphingTextMarqueeTextLongShadowSpecterRedactSplitFlapTeletypeMetallicTextMoltenNeonRimeInlayPreloaderRefractBlackHoleVortexBloomSmokeFieldRippleFieldUmbralOrreryLedgerAsciiEngineSwarmTelemetryPatchbayRubiksCubeMonolithShard OrbitGrid HorizonWarp RunEclipse FlareTidalLiquid ChromeHanami
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.
See itWavesGrainientLightRaysSideRaysDotFieldStrandsRibbonsWorldMap ASCIIConstellationAuroraStarfieldCindersShadowflameCathodeTuringQuicksilverMyceliumContourRainglassFerrofluidLissajousMoireDitherSakuraTreeFlockFieldCausticsLongShadowSpecterTeletypeMetallicTextMoltenNeonRimeAnaglyphInlayTorchlightHolofoilSmokeFieldLedgerAsciiEngineSwarmMirageSubmergeTelemetryRubiksCubeMonolithTidalHanami
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.
See itRift
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.
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.
See itMasonry
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.
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.
See itDataGrid
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.