All 100 effects of the website animation catalog, in its order: entrance reveals, scroll, hover and pointer, click and interaction, text and vector, loops and assets, WebGL and 3D — each one a live demo with knobs and a prompt.
100 effects · use them together
light A gallery programme where artworks, captions and a curator's note fade from opacity 0 to 1 (1.2s power2.out, 0.12s stagger) without moving — on load, on scroll, on hover/focus or on click — and fade back out when you leave.
light A magazine page whose covers, cover story and stats slide into their frames from a chosen edge (100% of their own size, 1.1s expo.out, 0.1s stagger) — inside an overflow mask or free — on load, scroll, hover/focus or click.
light A long-form case study whose paragraphs, figure, quote and stats drift 48px up while fading in (0.9s power3.out, 0.08s stagger) as they reach the reading line — and keep drifting up and out once read — on scroll, load, hover/focus or click.
light A pricing page and a shelf of UI components whose cards, badges and buttons scale from 0.6× at their bottom edge to full size (0.8s expo.out, 0.07s stagger) — or shrink from above 1× — on scroll, load, hover/focus or click.
light A festival lineup announcement where every name, update card and the date arrive oversized (1.5×), transparent and soft (6px blur), then settle to their real size (0.9s expo.out, 0.09s stagger) — and puff back out — on scroll, load, hover/focus or click.
light Badges, an order tick, notification pips and a week of streak dots grow from scale 0.3 past their size and settle on back.out(1.7) or a decaying elastic spring — on load, on scroll, on hover or on click, from one engine.
light App icons, reaction stickers and chat bubbles drop 120px into place on a CustomBounce ease — two or three shrinking rebounds, squashing on every contact — then one icon hops for attention every few seconds. Enter, scroll, hover or click.
light A letterpress seal, eight SVG ornaments and three packaging stamps wind in from one full turn and 60% scale to their resting angle on expo.out as they appear — turns and final tilt are separate knobs. Enter, scroll, hover or click.
light Herbarium specimen cards, stat tiles and a member pass turn from edge-on (rotationY 90°) to face the viewer with 900px perspective and a fading glint, 0.1s apart. Axis, angle and perspective are knobs; enter, scroll, hover or click.
light A tri-fold itinerary, four travel notes and a ticket with its stub swing forward from 90° behind the page on a left hinge, leaf after leaf (0.14s), each crease shadow lifting as it flattens. Hinge edge, angle and perspective are knobs.
light Six illustrated plates — paper plane, swallow, comet, kite, leaf, boomerang — fly onto their marks along a cubic Bézier, banking with the tangent and drawing a fading hairline trail; trigger on enter, scroll scrub, hover or click.
light A lookbook poster whose seal, price burst, flower mark, tag and half-moon twist into alignment (rotate −120° → 0, scale 0.3 → 1, expo.out) around a chosen pivot, followed by three icon tiles; trigger on enter, scroll, hover or click.
light Five project tiles and a statement card are uncovered by a travelling edge: clip-path inset() opens from one side, the centre line or all four sides (1.1s expo.inOut) while the work stays still — on enter, scroll, hover or click.
light Three observatory plates wait behind an 18px pinhole; a circle clip grows to exactly the radius that covers each plate (1.2s expo.inOut) from its focal point, centre, a corner or the pointer — on enter, hover or click.
light Four procedural photographs, each behind 8 surface-coloured slats that open in sequence (scaleY → 0, 0.06s stagger, expo.inOut) — or slide sideways, part from the centre or tilt like venetian blinds — while the image settles from 1.15 to 1.
medium A six-row colour index: each short title, plate and pigment note sharpens from blur(12px) + opacity 0 to crisp (1s power3.out, 0.1s stagger) on entry, scrubbed by scroll, or only on the row you hover or focus.
light Twelve cards share one entrance (y 28 → 0, 0.8s power3.out) but start at computed times: a list, reverse, centre-out, edges-in, random, diagonal or radial wave, with a fixed interval or a total spread — on enter, click or scroll.
light A 21:9 lake hero and two portrait images, each under stacked covers (surface, then accent) that part from the centre in sequence (1.3s expo.inOut, 0.14s apart); at 35 % of the opening the image settles from 1.25 and the headline lines rise.
light A tall hero built from five depth layers — sky, far ridge, mid ridge, foreground and headline — each scrubbed at its own yPercent speed from a data-speed attribute, plus a lerped pointer parallax on desktop that tilts the scene toward the cursor.
Featured light A pinned two-column feature section: four tabs on the left activate in sequence as you scroll — each with its own filling progress line — while the matching procedural visual on the right crossfades and slides in; clicking a tab scrolls to its segment.
Featured light A full-height section pins while vertical scrolling drives a row of large cards sideways; each card's image parallaxes against its frame and a hairline progress bar tracks the journey.
light A three-plate photo essay where each image's scale is tied to scroll progress inside a fixed, clipped frame — approaching 1 → 1.35 or receding 1.35 → 1 around its subject — while the frame's inset opens and a mono readout tracks the live scale.
light A dial, a type seal, petals and skewing blades turn through 180° as each crosses the viewport (top 100% → bottom 0%, scrubbed), while three text cards lean by 4% of that — on rotate, rotateX, rotateY, skewX or skewY.
light A fixed top bar scales from 0 to 100% as the article scrolls, mirrored by a circular ring with a live percentage and an estimated minutes-left label computed from the word count.
light A large serif paragraph whose words fill from a muted ink to full text colour as each one crosses the viewport centre, scrubbed by scroll — plus a marker-style accent highlight that draws itself behind two key phrases.
light Five full-width cards pin in sequence as you scroll; each arriving card slides over the previous one, which scales down to 0.9 and dims behind a translucent overlay, so the section ends as a neat stepped stack.
light Five chapters each carry a ground colour and ink colour in data attributes; when a chapter crosses a sensor line the body background and text tween to match, while a floating swatch readout names the colour.
Featured medium A pinned full-viewport canvas plays a 90-frame sequence scrubbed by scroll — the frames are generated procedurally at load (a turning wireframe ring in soft gradients and grain), with a mono frame counter and headlines that hand over at 30% and 70%.
Featured medium A pinned full-viewport video whose currentTime is scrubbed by scroll — the clip is encoded with every frame a keyframe so seeks land instantly — with a timecode HUD, a keyframe rail and captions that hand over at 32% and 66% of the pin.
light A fixed header slides out of view when you scroll down faster than a velocity threshold and slides back the moment you scroll up; past a set offset it shrinks into a compact strip with a frosted backdrop.
light A transparent header floats over a full-bleed fjord hero; once 120px of content has slid under it, a blurred solid bar fades in, a hairline draws across, the CTA turns accent and the bar compacts — switched at a threshold, scrubbed, or at the hero edge.
medium Lenis smooths the page (lerp 0.08) while chosen layers (three photos, hero lines, quote words, stats) chase that position with catch-up times of 0–0.6s. They trail behind as you scroll and settle into dashed outlines when you stop.
light Six linked essay cards: on hover or keyboard focus the card's surface rises 10px (0.45s power3.out) while a separate shadow layer fades and spreads beneath it, the border brightens and the arrow slides; pressing sinks it, leaving settles it back.
light A ceramics shop grid: hovering or focusing a tile scales its photograph to 1.15× inside a clipped 4:5 frame over 1s expo.out. The scale origin follows the cursor, a scrim and 'View piece' label fade in, and the badge, name and price never move.
light An essay page where every link draws a 2px lime underline from the left on hover or focus (0.5s power3.out) and, once complete, leaves through the right edge. Inline links in the body copy draw across wrapped lines in reading order.
light Four buttons on a membership page: on hover or focus a slanted lime pane sweeps across in 0.55s power3.out, carrying a counter-moving copy of the label so the text inverts exactly under the fill, then leaves through the far edge.
light A collection index whose rows flood with colour: surface, hairline and ink are each color-mix()ed from a 0–1 variable GSAP tweens (0.6s power3.out, ink 0.08s behind). Hover/focus, click-to-select or scroll-to-middle triggers.
light Three pricing cards rise 8px on hover or focus while a pre-rendered cast-shadow layer and a blurred halo fade in (0.5s power3.out); buttons interpolate their box-shadow directly, and the featured card's halo breathes on a pausable loop.
light Four service cards and a pill CTA get an outline generated from their own size and radius; hovering or focusing draws it around the element (0.9s power2.inOut via DrawSVG) and leaving lets the tail chase it away. Clockwise, counter or split from one corner.
light A four-product shop grid where each frame stacks a studio shot and an alternate view (detail, colourway or in situ); hover, focus or tap dissolves the alternate in (0.6s power2.inOut) as it settles from 1.06× while the primary fades out underneath.
light Six project tiles: hovering or focusing slides a dark veil in from the edge the pointer entered (0.55s expo.out, opacity → 0.72), pushes the artwork to 1.06× and lifts kicker, title and actions in with a 0.06s stagger; on touch the actions stay visible.
light Three product cards lean toward the pointer up to ±12° with quickTo-smoothed rotation, layered translateZ depth on image, title and badge, a specular glare that follows the pointer and a soft shadow that slides the opposite way; they relax flat on leave.
light Three pill buttons attract toward the pointer inside an invisible radius, their labels leading slightly for parallax, flood with colour from the entry point, and spring back with an elastic snap on leave.
light A white disc in mix-blend-mode: difference trails the pointer with a 0.12 lerp, inverting headlines, a lime block and an image as it passes, swelling from 24px to 120px over links with a tiny label and pulsing a ring on click.
Featured medium Moving the pointer across a dark stage leaves a trail of grainy gradient tiles: every 40px of travel a new tile blooms under the cursor with a slight twist, hangs for 0.6s and dissolves, stacking above the last.
Featured light A pitch-dark page where a feathered radial spotlight follows the pointer with lag and uncovers a procedural star-chart composition beneath; clicking pulses the circle wider, and keyboard users get a static centred spotlight.
light A product card and a control panel where every button, switch, segment and record key compresses to 0.94 and sinks 2px on pointer or key down, then springs back with back.out(3) on release or when the press is cancelled by sliding off.
light Buttons, list rows, chips, icon buttons and a FAB each spawn a translucent circle of ink at the exact press point (keyboard: the centre); it scales to the farthest corner in 0.55s, holds while pressed, then fades out and removes itself.
light Five hairline-ruled FAQ items open with a true height-from-zero-to-auto tween; the plus rotates into a cross, the copy slides up a beat later, the index turns lime and the previously open item closes at the same time.
light An off-canvas drawer slides in from the left or right over a fading scrim while its links stagger in; the page behind is made inert, focus is trapped, Escape closes, and a swipe (GSAP Draggable) drags it shut with the scrim following your finger.
light A museum booking page: the backdrop fades to 0.7 while the dialog rises 16px and scales 0.92 → 1 (expo.out, starting 0.2s before the dim finishes); its rows stagger in. Closing plays a quicker scale-fade out before the layer hides and focus returns.
light A radio-station header whose burger morphs into a close icon and opens a menu, above four large specimens of the same three bars: cross, two-step collapse, arrow and spin. Outer strokes travel ±6px to the centre and rotate ±45° while the middle one vanishes.
light A product tab bar whose single indicator slides and resizes to the active label with GSAP Flip — optionally stretching across both tabs first — while the content panels crossfade. Fully keyboard operable with a roving tabindex and arrow keys.
light A five-place slideshow: arrows, dots, keys, drag or autoplay pick the next slide and both slides animate as a pair — slide with lagging inner art, crossfade with drift, or a clip-path wipe, with loop, rewind or clamp wrapping and a 60px drag threshold.
light A bento-style grid of nine mixed-span tiles is filtered by a pill bar; GSAP Flip records the layout, toggles visibility, then glides every surviving tile into its new slot while leaving tiles shrink away.
light Clicking one of six thumbnails records its position with Flip.getState, reparents it into a full-screen detail layout and morphs it there in 0.9s power3.inOut while the other tiles scale away; Close or Escape morphs it back.
light Three type-specimen cards (Fraunces, Inter Tight, JetBrains Mono) turn 180° on Y with 1200px perspective in 0.8s power3.inOut on hover, focus or click, dipping to 0.95 with a sheen mid-turn to reveal a back with character set, weights, licence and Copy CSS.
light Section links glide the page to their target instead of jumping: the stop clears the fixed header, longer trips take longer, focus moves to the heading, the nav ink follows, and any wheel, touch or key press hands control straight back.
light Ten portrait cards you can drag or throw: GSAP Draggable + InertiaPlugin coast the track and snap it to the nearest card centre, cards scale and fade with their distance from the middle, and a progress bar, counter, arrows and keyboard keep it navigable.
light A pill "Celebrate" button squashes on press and launches pooled canvas confetti — rectangles, discs and thin ribbons — that spin, flip and flutter down under gravity and drag, while the label rolls to a drawn check "Celebrated".
Featured light A headline is split into characters that rise out of a masked line one after another, followed by a soft fade-in of the supporting copy and a replay button.
light Three studio statements arrive one word at a time — each word rises 28px out of transparency on its own beat, commas and full stops add a breath, and the italic emphasis words land a moment later from further away.
light An editorial block — kicker, headline, three paragraphs and a byline — where every line rises out of an overflow mask as its block scrolls into view (SplitText lines, yPercent 100 → 0, 1.1s power4.out, 0.07s stagger).
light A serif headline types its last phrase one character at a time with uneven, human timing and a breath after punctuation, rests with a soft-blinking caret, backspaces with acceleration and types the next phrase; the thin caret smears as it jumps.
Featured light A mono headline and five nav-style rows decode from random glyphs (A–Z, 0–9, #@%&!) into real words on load and re-scramble on hover, while a status line decodes a new word every three seconds.
light A headline ends in a phrase that rolls to the next alternative: all options stacked in a clipped one-line window sized for the longest, the stack moving by one line height. Loops every 1.6s, or rolls on hover or click; a status line follows.
light A row of four oversized serif statistics counts up from zero the moment the row enters the viewport — snapped to whole units, 1.8s power3.out, 0.15s apart — with prefix/suffix, tabular numerals and a hairline underline that draws beneath each figure.
light Four KPI tiles where every digit is its own vertical reel: values that rise roll upward and fall roll downward (wrapping through 9/0 like an odometer), the trend arrow flips, the delta pill swaps tone and a sparkline slides one step. Auto-updates every 2.8s.
light A still life, a release-loop diagram and a signature draw themselves stroke by stroke with DrawSVG (0% → 100%, 1.8s, 0.06s stagger), then fills and labels scale in. Draw on load, scrub with scroll, draw on hover and erase on leave, or toggle on click.
light Six icon pairs — play → pause, menu → close, sun → moon, heart → star, stop → record, next → done — and a large pebble that becomes a flower, star, drop, squircle or wave, all interpolated with MorphSVG on hover, click, scroll or a loop.
light A glowing comet marker and its label card ride an SVG route via MotionPathPlugin (align + autoRotate) as you scroll a tall section, while DrawSVG inks the route 8% ahead of the marker; three stations light up as it passes.
light Two sentences set on crossing SVG curves slide along their paths as you scroll — the serif line travels one way, the outlined accent line the other — by scrubbing each textPath's startOffset over the section's trip through the viewport.
medium A serif heading is sampled into thousands of points that ride a travelling wave — each circles on its own Gerstner orbit, warped by noise, shaded bright on the crests with accent glints — and the pointer drops ripples that roll outward through the type.
medium A wordmark is blown in from one side as fine wind-borne grains that streak, swirl, settle onto the letters and hand over to crisp type behind a soft front; Remove erodes it from the same edge and carries the grains away downwind.
medium A flock of dash-shaped particles pours in from the screen edge, wheels around a promo heading on a noise flow field and settles letter by letter into crisp type; hover, tap or Enter releases the swarm again and it always flies home.
light A single display word split into characters whose font weight (300 → 900) and SOFT axis follow the pointer with a Gaussian falloff; leaving sends a left-to-right ripple back to rest, and touch devices get an automatic looping wave.
light A guided-breathing hero: a soft orb of light and three halo rings swell from scale 0.82 to 1.06 over 4s, rest 1s, then settle back (sine.inOut yoyo), each ring lagging a beat; the cue word crossfades Inhale, Hold, Exhale.
light A skincare hero where an amber serum, a stone jar, a lime tube, a droplet and two pebbles drift 18px on 6s sine yoyo loops, each offset by 30% of a cycle and tilting on its own period while their floor shadows shrink as they rise.
light An SVG shop sign hangs from a bracket hook and sways idly; hover, focus or tap kicks it into a 12° swing that loses 38% per half-swing (0.9s, sine.inOut) until it settles, while bell, tag and heart icons rock around their own hinges.
light An invite form refuses an invalid submit: each field that needs attention jitters 10px left and right four times with a shrinking range (0.5s total), lands exactly at 0, turns red and shows a message saying what to fix.
light A courier-tracking map where three rings leave the live pin every 0.7s, growing to a 72px radius while fading from 70% to nothing; pressing the shop, home or a hotspot fires one quick burst of rings and a label.
light A text-ring badge, a two-arc loader, a 16-point seal and a pair of meshing gears turn forever on linear 360° loops. Pause, reverse and hover never snap: one signed timeScale eases through zero.
light Twelve integration nodes circle an accent hub on three rings at 1, 2/3 and 2/5 speed. Hover or focus one and the whole system eases to a stop, a dashed line links it to the core and its details slide in.
light Two bands of huge serif words, one filled and one outlined, loop endlessly in opposite directions; scroll velocity speeds them up and flips them, hovering a band eases it to a stop.
medium Four painted landscapes drift from a wide crop to a tight crop on their subject (or back) inside a rounded frame, crossfading while the old image keeps moving. A live crop map shows start, end and focal point — click it to refocus.
medium A full-screen fragment shader blends four drifting colour fields through domain-warped simplex noise, adds animated film grain and a soft vignette, and lets the pointer gently pull the warp; a CSS gradient stands in when WebGL or motion is unavailable.
light Three original Lottie animations authored as JSON: an upload story with intro, seamless loop and success segments in a full player (segments, speed, loop, scrub slider), a bell that rings on hover, a like burst on click and a scroll-scrubbed copy.
light Pip, an original SVG character, runs on a Rive-style state machine: Idle, Curious, Happy and Asleep, driven by isAwake, mood, a cheer trigger and pointer look inputs. Every change blends over 0.45s; a live graph and log show each transition.
medium The pointer drags a wake of noisy distortion through a full-bleed dusk-dune picture: a decaying float trail buffer masks an fbm displacement with static rows, grain and RGB split, widening with pointer speed, then heals.
Featured WebGL A Three.js plane shows a procedurally painted image that warps like liquid under the pointer (noise UV displacement weighted by distance and speed, with a velocity-driven RGB split); hovering a swatch melts it into a second image.
medium A poster is sliced into strips (or rings) that each slide by their own phase, so the image repeats in stepped copies like a slit-scan photo; a looping wave drives it, the pointer drags the nearest strips and scroll scrubs and shears the scan.
medium A wobbling orb trails the pointer over a grey plaster still life; inside it the picture is re-sampled per channel like a prism and gradient-mapped between two drifting colours, stretching with speed and widening when pressed.
medium A tiled pool picture sits under moving water: a wave height field in the fragment shader bends every lookup by its slope and gathers light where its curvature focuses, with swell, drop and interference patterns, stretch and speed.
WebGL Four image tiles share one WebGL renderer; hovering a tile splits its red and blue channels along the pointer's direction (offset scales with velocity), zooms the UVs 1 → 1.08 over 0.8s and tears the first 150ms into glitched horizontal slices.
WebGL A full-bleed WebGL plane, matched every frame to a DOM frame, melts between four procedural images as a pinned section is scrolled — a fractal-noise mask drives a liquid front with pixel displacement and a chromatic split, while captions hand over per segment.
medium A plate breaks into irregular noise patches with a glowing rim and the next picture shows through — fractal noise compared with an animated threshold; it assembles on entering view, advances on click, scrubs with scroll or follows a manual threshold.
WebGL Four figures in a normal scrolling page are mirrored by WebGL planes on one fixed canvas, matched to their DOM rectangles every frame; the planes bow and ripple with scroll velocity in the vertex shader and zoom slightly on hover.
light Three canvas layers of stars at different depths drift slowly across a sticky sky, slide under the pointer with depth-weighted parallax, rise as you scroll, and every few seconds a shooting star streaks through the near layer.
WebGL A GLB perfume flask idles on a slow turntable under a key/fill/rim studio rig with a soft contact shadow; drag to orbit with damping, pick a finish to tween the PBR colour, and labels track points on the model.
Featured WebGL A pinned, scrubbed scroll flies a Three.js camera along a Catmull-Rom spline through floating prints, accent rings and drifting particles, aiming a little ahead of itself; fog keeps the far work soft and DOM captions land at four waypoints.
Try “pinned”, “SplitText”, “WebGL”, “cursor”…