Scroll Library · 116 effects · 11 rooms
Each room below is a live demonstration of one scroll technique, built with the same engine as the effects it introduces. Keep scrolling. The index on the right follows you.
Things arrive. Fade, rise, wipe, unmask — the first move every page makes.
Featured light A pinned keynote paragraph of large serif words that light from 20% to 100% opacity one by one as you scroll through +=250% of pinned travel (SplitText words, scrub 0.6), the current word glowing lime before it settles; hairline progress + word counter.
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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 Headline characters swing in from a 90° rotateX (or rotateY) with real perspective and a z-translate as each heading enters the viewport; lines are masked so the letters appear to rise out of the page.
medium Headline, pull quote, image + copy pairs and a stat row rack into focus as they enter: filter blur(16px) + opacity 0 + scale 1.04 → sharp over 1.2s power3.out, with the filter cleared afterwards so the GPU cost lasts only as long as the motion.
light A pinned dark stage opens like an iris: a full-bleed procedural landscape is revealed through a scroll-scrubbed circle clip-path that grows from 0% to 150% while the art settles from a slight zoom, and the headline rises at 60%.
light Large editorial images are wiped on by animating clip-path: inset() from one edge (left/right/top/bottom) to zero, a 1px accent hairline riding the wipe front; toggle between a 1.2s play-once reveal and a scrubbed, reversible wipe.
light An asymmetric editorial grid of images where each mask opens left-to-right (clip-path inset 0 100% 0 0 → 0) while the picture inside settles from scale 1.3 to 1 over 1.4s expo.out; neighbours in a row are staggered so the page reveals like a contact sheet.
light Three editorial groups — a heading plus three cards each — fade-rise into place (y 40 → 0, opacity 0 → 1, 1s power3.out, 0.08s stagger) as they enter the viewport; ScrollTrigger.batch groups whatever enters together into one staggered tween.
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).
Hold the viewport still and let the scrollbar play a timeline.
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 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.
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.
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 hero where the display word DEEPER is punched out of a page-coloured panel; scrolling scales the word 40× around the stem of one letter so the camera flies through it and the image panel behind is revealed.
light A pinned 35mm strip of fourteen procedural frames — sprocket holes, edge print, one dawn-to-dusk scene — is pulled through a projector gate by the page scroll while a sticky frame counter and a “now showing” caption update as each frame lands.
light Six milestones on a vertical line: the year stays pinned on the left while a progress line draws down with the scroll, each dot pops and fills as you pass it, and the cards slide in from alternating sides.
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.
Layers at different speeds make a flat page feel deep.
Featured medium A pinned 3D CSS scene: four planes sit at real translateZ depths inside a 1200px perspective, and scrolling tilts and dollies the camera container through them (rotateX +10° → −10°, z −240 → +360px) — near planes sweep past, the far word barely moves.
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 An editorial grid of five fixed-size, overflow-hidden frames; inside each, a 130%-tall image is scrubbed from yPercent −15 to 15 as its frame crosses the viewport, so every picture drifts against its own window.
light A four-plane nocturne hero — stars, rings and an orb, the headline, a hazy foreground — where each plane is scrubbed at its own yPercent speed by scroll and, on desktop, leans ±20px per depth toward the cursor through a lerped pointer loop.
light Viewport-sized display words sit behind and in front of three image plates and travel at their own speeds as you scroll; the front words are outlined and set to mix-blend-mode difference, so they invert wherever they cross a picture.
light Four columns of stacked cards scroll at four different rates — each column's data-speed scales a y tween across the section's scroll distance — so faster columns feel nearer and the wall gains depth, with the column speeds printed as a live legend.
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.
Skew, fan, rotate, converge — geometry driven by velocity and progress.
velocity 0
Featured light A 3×2 grid pins; as you scroll the centre tile grows (a measured clip-path inset) until it fills the viewport while the other five tiles slide out of frame, then a headline rises over the full-bleed image. Scroll up and it folds back into the grid.
Featured medium Twelve portrait images stand on a 3D ring (rotateY i×30° translateZ R) inside a perspective stage; a pinned section turns the ring with the scroll while the frame facing you is named in a caption and tracked by a progress bar.
Featured light Twelve image tiles start thrown across a pinned viewport at random positions and angles, then glide, rotate and scale into a neat 4×3 grid as you scroll — both layouts are measured and Flip.fit computes the exact transform for each tile.
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 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 Seven cards start as a neat deck; through a pinned section the deck fans open (rotation −30…30°, x spread, a slight arc) like a hand of cards, holds, then the cards straighten and settle into a clean row of steps with a caption.
medium A glowing tile grid tilted 60° into the screen rushes toward the camera as you scroll through a pinned section; lit tiles drift past, a gradient fog swallows the far rows at the horizon and a mono HUD counts the distance travelled.
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.
light A long grid of gradient tiles and oversized words shears up to ±8° and shrinks slightly in proportion to scroll velocity, then eases back to zero in 0.8s; a mono readout shows the live velocity and skew.
Typography that lights up, fills in, counts and crosses the screen.
Scroll is the one gesture every visitor already knows. Pin it, scrub it, bend it — and the page starts to feel like a place.
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 A viewport-filling serif wordmark shrinks and travels into the header's logo slot as you scroll a pinned hero — Flip.fit measures the exact transform — while the header background and nav links fade in behind it.
light One enormous word (30vw tall) sweeps across the viewport from right to left as its section scrolls past, scrubbed to the scroll and layered between three images so it slides behind some and in front of others.
light Four lines of hollow, outlined display type fill with solid colour from left to right as each line crosses the viewport — a filled duplicate sits over the outline and a scrubbed clip-path inset reveals it, so the lines pour full one after another.
light A pinned headline reads 'We design ___'; every scroll step flips the blank word to the next of five with a masked rotateX turn, a hairline step indicator fills along, and the scroll snaps to each word's resting point.
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.
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.
Lines that draw themselves and shapes that travel.
light Rough, marker-style SVG underlines, circles, arrows and strike-throughs are generated over key phrases and ink themselves in (DrawSVG 0 → 100%, 0.8s power2.inOut, two passes of different weight) as each line scrolls into view.
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 A large SVG blob sits behind four full-height chapters and morphs between four shapes (MorphSVGPlugin) on one scrubbed timeline that spans all of them, its fill sliding from one colour to another as the chapters pass.
light A long vertical SVG route draws itself as you scroll (DrawSVG 0% → 100%, scrubbed) while a glowing dot rides the pen tip via MotionPath; four station dots pop in with a back.out(2) overshoot and their labels slide in as the line reaches them.
The room changes colour as you walk through it.
light A fixed full-page gradient built from four CSS variables (three colours + angle) is scrubbed through four keyframes as the page scrolls: the colours cycle through the stops, the stop positions breathe and the angle turns, with a small dial reporting the angle.
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.
light A fixed near-black overlay with a radial mask hole is a torch beam: its position and radius are scrubbed along a keyframe path as the page scrolls, lighting each exhibit in turn; the cursor leans the beam on desktop and the hole opens fully at the end.
light A dark editorial page flips to a warm paper-white theme while the Daylight chapter is on screen: five CSS design tokens tween on the body, the artwork inverts and a fixed difference-blend logo stays legible through the flip.
Shaders and 3D scenes synced to the page scroll.
Scroll velocity bends the plane
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.
WebGL Ten procedural prints sit on WebGL planes bent onto a cylinder in the vertex shader; a pinned, scrubbed scroll turns the ring past the camera while the far frames fade into the dark and a DOM caption follows the nearest print.
WebGL Twenty thousand points drift in a sphere, converge into the word MOTION as a pinned section is scrolled, hold on the wordmark, then disperse again — each particle on its own randomly staggered path inside one vertex shader driven by a scrubbed uProgress.
WebGL A pinned Three.js bottle (procedural bevelled lathe, brushed cap, studio lighting) turns 360° as you scroll; four feature labels fade in at the rotation angle where their part faces you, with leader lines projected from 3D anchors.
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.
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.
Progress, wayfinding and headers that know which way you are going. The index on the right and the bar at the top are this room's demo.
Featured light GSAP Observer turns every wheel tick, swipe or arrow key into one full-height section change — a 1s expo.inOut scroll, a staggered content reveal on arrival, a rolling '03 / 06' counter — and refuses to over-scroll past the ends.
Featured light A masthead-sized serif wordmark hanging below a sticky bar shrinks and docks into the bar's logo slot over the first 240px of scroll (Flip.fit, scrubbed) while a frosted background fades in, a hairline draws across and the nav links tighten up.
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.
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 back-to-top disc pops in after 30% of the page, draws the page's scroll progress as a scrubbed SVG ring, leans towards the cursor with a magnetic pull and scrolls home in 1.2s with ScrollToPlugin.
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 fixed column of six dots tracks six full-height chapters: the active dot grows, turns accent and reveals its chapter name; hovering shows any label; clicking scrolls smoothly to that section with ScrollToPlugin.
Chapters, loops and morphing layouts for long-form pages.
Featured medium A complete luxury launch page in one motion language: a counted preloader, a masked hero over a settling image, a pinned canvas bottle that turns to reveal three callouts, a word-by-word story, a pinned sideways gallery and a footer wordmark that fills.
WebGL E-bike launch template for an invented Rotterdam brand: a photo-real 3D bike rolls in, then the scroll tracks the frame, drops the battery, explodes the motor, swaps colours and counts the range.
WebGL A light launch page for invented Stillmere One headphones: a photo-real 3D pair rotates in, comes apart into seven parts, flattens a noise wave, changes colour and folds into its case, then specs, compare, pre-order bag and FAQ.
WebGL A light shop page for an invented Paris lipstick house: a photo-real gold lipstick pops its magnetic cap, twists, raises the bullet and walks through eight shades as you scroll, then real arm swatches, a shade finder, sets, refills and a bag.
WebGL Perfume-house template for an invented Grasse brand: a door of stars opens, the camera falls through moonlit cloud into a walled night garden, and each flower you open lifts a glass perfume flask from its heart.
WebGL Niche perfume house template: scroll moves the sun across a limestone table from dawn to night, past four photo-real glass flacons whose coloured shadows and caustics swing with the light.
WebGL Serum skincare template for an invented Copenhagen brand: a photo-real frosted dropper bottle; scroll lifts the glass pipette, gathers one drop, lets it fall and lands it as a real macro video.
WebGL Soft-drink launch site for a fictional cola: one photo-real 3D can spins in cold, cracks open, slices into six flavours, pours through each colourway and lands in the lineup.
light A sleeper-train landing page where the route's altitude line is the spine: the title holds while the line draws and a train rides it, every section's top edge is its own stretch of the climb, and a ticket shows your sunrise.
medium An onggi-jar landing page where scrolling runs a jar of doenjang through 1,000 days: the cut-away contents ripen green to brown and an orchid draws itself; a kiln ticket picks your jar.
WebGL A light landing page for an invented Norwegian glass studio: a Three.js glass float fills with clipped, sloshing fjord water to today's tide as you scroll, a draggable tide clock refills it hour by hour, then shop, stages, pricing ticket and FAQ.
WebGL A light landing page for an invented Gifu lantern workshop: a procedural Three.js paper lantern that the scroll winds, papers, folds flat and opens, a drag-to-open paper chooser, drawn river scenes, prints, stepped pricing and FAQ.
medium A light clay-mask landing page: a WebGL tin of wet geothermal clay rises behind the wordmark, then dries from blue-grey to white and cracks as you scroll, the batch numbers opening in its cracks; an 18-minute mask timer dries it live.
medium A light sourdough-bakery landing page built as its chalk proving log: the log writes itself stroke by stroke as you scroll, a loaf's ear splits at 5:00, and a dough-thermometer dial rewrites the night.
light An estate-agent landing page where a drawn Haussmann façade is cut open floor by floor as you scroll, revealing archive prints, then becomes the listings index: each floor shows its ceiling, sun and price per m².
medium A light, playful landing page for six invented baches on stilts: the drawn estuary floods under the bach as you read and ebbs by booking, where a day slider and a tide-table calendar let you pick a week by its dry mornings.
WebGL A light split-stage page for a fictional Lagos climate-architecture practice: a sticky Three.js house where scrolling runs one day of real sun, louvres turn to keep the room shaded and the bar compares indoor and street temperature.
medium A light landing page for an invented South Sea pearl farm: scroll drains a nine-metre Kimberley tide over drawn oyster panels, pearls are picked into a sorting tray and turned in a WebGL nacre-shader loupe.
medium A light landing page for an invented Calabrian bergamot grove: a drawn 1911 sponge press stays fixed beside the text, squeezes the rind tighter with every section and drips oil into a glass. Hold the rind to press it yourself.
WebGL A light island-festival landing page whose line-up is the tide table: the name stays pinned while a GLSL sea drains off a raked sandbar stage, and a draggable tide dial reveals only the acts playing while the bar is dry.
medium Skincare shop template for an invented seaweed brand in Roscoff: a photo hero that says what it sells, a filterable grid with a working bag and quick view, a skin-type routine finder, then a GLSL sea that drains off the kelp beds.
WebGL A light off-plan sales page for an invented timber tower: a procedural Three.js building that assembles floor by floor on an 11-day counter, flats indexed by the forest plot stamped on their walls, a delivery-note price and FAQ.
WebGL A light landing page for an invented Monterrey tower: a 3D valley where scrolling rides the lift from the street to floor 32 as the sun clears the saddle, a floor dial that re-frames the view and reprices the flats, and a full sales page.
WebGL A light landing page for an invented merino blanket mill: a Verlet-cloth blanket hangs on a rail in a sticky WebGL stage, and as you scroll the plain falls to −15 °C, the weave tightens and frost creeps in. Drag it by a corner.
medium A light, place-led houseboat landing page: a canal photograph holds while the barge drags along its bottom edge, a clock, the light and the next stop follow its real timetable, and the sky warms to lamp gold.
medium Watch shop template for an invented Swiss moonphase maker: a photo hero that says what it sells, a filterable product grid with a working bag and quick view, then a WebGL watch whose moon turns with the scroll and a night picker that sets the moon you buy.
WebGL A light editorial landing page for a fictional six-tent mokoro camp: scroll January to June and a GLSL flood seeps across a low-poly 3D delta to reach the camp at the June panel; then pick your month.
medium A complete fintech landing page: a 3D card that tilts toward the pointer beside a live, ticking balance, a bento of product mock-ups, a pinned cash-flow chart that draws itself as transactions stream in, a security vault, stats, pricing and FAQ.
medium A one-page portfolio for an invented designer-developer: a screen-wide name whose letters rise and thicken under the cursor, a pinned sideways gallery of six original project posters that open into case studies, services, process, FAQ and a copy-email contact.
WebGL A full light-palette launch page for an invented smart speaker: a procedural Three.js model on a drag-to-turn turntable, a pinned scroll that turns and opens it into four parts with leader-line callouts, specs, colourways, sizes, reviews, pre-order and FAQ.
medium A complete light, colourful B2B SaaS landing page: a product dashboard that assembles itself in a 3D-tilted hero, a logo marquee, bento features, a pinned four-step tour whose UI changes per step, count-up stats, a monthly/yearly pricing toggle, FAQ and CTA.
light A pinned gallery of eight tiles morphs from a four-column grid into an index list as you scroll: Flip records the grid, the layout class flips to list, and Flip.from() is scrubbed inside a paused timeline while titles and hairline rules stagger in.
light A pinned column of eight archive entries that never runs out: a seamless looping timeline is wrapped with gsap.utils.wrap and driven by a smoothed scroll proxy, so the list cycles endlessly in both directions while entries scale and fade towards the edges.
light A five-chapter story page that alternates reading directions: vertical prose chapters flow normally, while two picture chapters pin and travel sideways; a persistent hairline rail with chapter dots tracks the whole journey.
light Five tall image panels sit in a pinned row; scrolling opens them one after another — the active panel widens to take half the row while the others compress to slivers — using only transforms and clip-path, with the caption rising inside the open panel.
light A two-column feature: the left visual column is sticky for the whole section while four text chapters scroll by on the right; each chapter crossing the centre swaps the visual with a directional crossfade and lights its progress dot.
Scroll-driven animations with no JavaScript at all. This stage uses animation-timeline: view() — no script.
light Animated by CSS scroll-driven animations alone: view()-timeline reveals with a custom-property stagger, a scroll()-driven progress bar, and a 300vh sticky chapter whose lines and 0–100% counter run on a named view-timeline with animation-range.
light A five-layer procedural landscape parallaxes with zero JavaScript: each layer rides its own view() timeline with a different translateY range, a sticky caption fades across the scene's cover range, and @supports keeps unsupported browsers on a static scene.
Exit
Try “pinned”, “SplitText”, “WebGL”, “cursor”…