Web animation reference
Motion you can copy.
76 working animations across 10 categories. Open one, watch it, replay it, copy the code.
Fade up
The workhorse entrance: content fades in while rising a few pixels into place.
Staggered list
Items enter one after another using a per-item delay set from a CSS variable.
Spring pop
Scale in with a springy overshoot, using the CSS linear() easing function instead of a library.
Blur in
Content resolves from a soft blur to sharp, with a slight scale settle. Feels like a camera focusing.
Image wipe reveal
An image is uncovered by an expanding clip-path while it zooms out slightly.
Slide in from any side
Four reusable classes slide an element in from the left, right, top or bottom.
3D flip in
A card swings up from flat on its back to face the viewer, using perspective and rotateX.
Hero entrance sequence
A choreographed page load: eyebrow, headline lines, text and button arrive in order from one timing system.
Fade out then remove
Click to dismiss. The element fades and shrinks, then is removed from the DOM only after the transition ends.
Swipe away
Drag a card sideways. Past a threshold it flies off screen; otherwise it springs back.
Collapse out of the layout
Items shrink to zero height so the list closes the gap smoothly. Uses grid rows 1fr to 0fr, no height guessing.
Shrink and dissolve
Click the tile and it scales down while blurring and fading out, like it is evaporating.
Toast with auto exit
A notification slides in, shows a draining timer bar, then slides out by itself.
Reveal on scroll
Elements fade up the first time they enter the viewport, detected with IntersectionObserver.
Scroll progress bar
A bar at the top fills as you read down the page. Pure CSS with animation-timeline: scroll(), plus a JS fallback.
Pinned horizontal scroll
A section pins to the screen while vertical scrolling slides a row of panels sideways.
CSS scroll-driven reveal
Each card animates in as it crosses the viewport, driven entirely by CSS animation-timeline: view(), with no JavaScript.
Count-up numbers
Stats count from zero to their value when scrolled into view, with an ease-out so they settle gently.
Pinned hero that shrinks
A full-screen hero stays pinned and scales into a rounded card as you scroll, revealing the page beneath.
Scroll text fill
A paragraph lights up word by word as you scroll, from dim grey to full white.
Scroll snap sections
Full-screen sections that lock into place as you scroll, with content that animates in on arrival.
Layered scroll scene
Background layers move slower than the foreground as you scroll, which creates depth.
Fixed background parallax
The oldest trick: background-attachment fixed pins the image to the viewport while the section scrolls over it. One line of CSS.
Pure CSS 3D parallax
Real depth with no JavaScript: a scroll container with perspective, and layers pushed back with translateZ then scaled up to look normal.
Scroll-driven CSS parallax
Each image drifts inside its frame as it crosses the screen, using animation-timeline view() and no script at all.
Mouse parallax
Layers shift against the cursor by different amounts, with smooth easing, so the scene feels like it has real depth.
Tilt (gyroscope) parallax
On a phone the layers move as you tilt the device; on desktop the same scene follows the mouse. iPhone asks permission first.
Image window parallax
Images sit inside a fixed frame and slide slowly within it as the frame scrolls past, like looking through a window.
Horizontal parallax scene
Scrolling down pans a landscape sideways. Distant mountains crawl, near trees race past, so the world has depth.
Giant text parallax
Huge faded words sit behind the content and drift at a different speed from the cards on top of them.
Multi-speed columns
A gallery whose columns scroll at different speeds, so the grid stretches and staggers as you move down.
Zoom parallax
A pinned collage zooms toward you as you scroll. Each picture scales at its own rate, so the outer ones rush past the centre.
Hero fade parallax
As you leave the hero, the background sinks slowly, the headline lifts away and fades, and the next section slides up over it.
Stacking cards
Cards stick near the top and pile up as you scroll, each one settling slightly lower than the last, with earlier cards shrinking back.
Curtain reveal sections
Each section pins in place while the next one slides up and covers it, like pages of a book being laid on top.
Rotate and scale on scroll
Decorative shapes spin and grow or shrink at different rates as they pass through the viewport, adding motion beyond simple up and down.
Layered depth card
An illustrated card whose layers slide by different amounts as the cursor moves across it, with a gentle tilt.
Inertia lag parallax
Columns chase the scroll position with different amounts of smoothing, so they trail behind and catch up like they have weight.
GSAP ScrollTrigger parallax
The industry-standard way: ScrollTrigger scrubs a tween across the scroll range, so images drift and headings move with perfect smoothing.
Auto-scrolling side scroller
A looping landscape that moves on its own, with far layers drifting slowly and near layers racing, like a video game background.
Opposite-direction rows
Rows of big words slide sideways in opposite directions as you scroll, creating a weaving, rhythmic parallax.
Depth tunnel fly-through
Scrolling flies the camera forward through a stack of panels in 3D. Each panel rushes toward you, then passes and fades out.
Reusable data-speed parallax
A tiny drop-in script: put data-speed on any element and it moves at that speed relative to the scroll. Negative values go the other way.
Layered text depth
A headline made of stacked copies. The mouse slides each copy a little further, extruding the word into a 3D slab.
Scroll velocity skew
Cards lean and stretch in the direction you scroll, based on how fast you are moving, then settle when you stop.
Curtain wipe
A coloured panel sweeps up to cover the screen, the view underneath swaps, then the panel sweeps away.
View Transitions crossfade
The browser snapshots the old and new view and crossfades them for you with document.startViewTransition().
Slide push
The current view slides out one side while the next slides in, like a native app navigation.
Circle reveal from click
The next view expands as a circle from exactly where you clicked, using an animated clip-path.
Intro loader with counter
A full-screen loader counts to 100, then splits open to reveal the page. Shown once per session.
Magnetic button
The button is gently pulled toward the cursor while hovered, then springs back when you leave.
3D tilt card
The card tilts toward the pointer in 3D, with a soft glare that follows the cursor.
Underline that draws in
A link underline grows from the left on hover and exits to the right, using a scaled pseudo-element.
Text roll link
The label rolls up and a duplicate rolls in from below, per letter with a small stagger.
Image zoom and colour wake
Images sit slightly muted, then zoom and bloom into full colour on hover, with a caption sliding up.
Arrow swap button
On hover the arrow exits the button on one side while a fresh arrow enters from the other.
Split word reveal
A heading rises word by word from behind a mask. Each word is wrapped by JS so the HTML stays a normal heading.
Letter by letter
Each character drops in with its own delay, giving a lively, playful headline entrance.
Typewriter
Text types out character by character with a blinking caret, cycling through several phrases.
Flowing gradient text
A colour gradient slides endlessly through the letters using background-clip: text.
Text scramble
Random characters shuffle and then lock into the real word, letter by letter, like a decoding effect.
Infinite marquee
A seamless looping ticker of words, built by duplicating the track and translating it by exactly half.
Spinner ring
The classic loading ring: a circle with one coloured edge that rotates forever.
Skeleton shimmer
Grey placeholder shapes with a light band sweeping across, standing in for content that is still loading.
Striped progress bar
A determinate progress bar that fills smoothly, with moving diagonal stripes to show activity.
Bouncing dots
Three dots bounce in sequence, the familiar typing or thinking indicator.
Aurora gradient
Soft blurred colour clouds drift slowly behind content, like northern lights.
Floating shapes
Outlined shapes drift upward and rotate at different speeds, adding quiet life to a section.
Particle network
Dots drift across a canvas and draw lines to their neighbours. Particles are pushed gently by the cursor.
Perspective grid
A retro 3D grid floor scrolls toward the viewer, made from one repeating gradient and a perspective transform.
Toggle switch
A switch whose knob slides and squishes slightly, with the track colour easing between states.
Like button burst
Tapping the heart pops it with a spring and releases a small ring of particles.
Smooth accordion
FAQ panels open and close with an animated height, using the grid-template-rows 0fr to 1fr trick, plus a rotating chevron.
Ripple click
A circle expands from the exact click point and fades, the Material-style press feedback.
Success checkmark draw
A circle draws itself, then the tick strokes in, using SVG stroke-dasharray and stroke-dashoffset.
Custom cursor follower
A ring trails the pointer with smooth easing and grows with a label when it passes over a target.
Nothing matches that search. Try a shorter word.