Get started

CSS Animations · Scroll

Scroll owns the timeline.

Scroll the matrix Read the catalog docs →
Vintage Camera Landing Page Scroll Animation in Figma — Zaid
This Horizontal Scroll Animation is EASY! (GSAP & Lenis) — Rupz Web

data-kui="flip-card trigger:hover-toggle"

Reference

A hero gets one job: make you stop.

Four decisions are doing the work. Give the frame a column of its own and it stays pinned while they scroll past it.

01

It spends everything on one image

02

The type ranks itself

03

Contrast is protected, not assumed

04

One next step, stated twice

Scroll reveal & parallax

  • 13 names in catalog section B, 12 of them shipped. Seven are demonstrated below.
  • One is not shipped yet — reveal-direction-aware has to know which way the page is travelling, and no CSS timeline exposes that.
  • reveal-repeat was dropped — byte-identical to reveal-once once the binder stopped re-observing after first entry. It is gone from the catalog, not pending.
  • Scroll effects are progress-linked, not event-fired — so they run backwards when you scroll back up.
  • Everything below reverses if you scroll back up through it — that is the timeline, not a replay.

Same effects, different elements

The NeoVision homepage — a woman in profile wearing a white VR headset beside the headline New Digital Universe, with a 47.2% Reality stat and a client avatar row
data-kui="fade-up, blur-in timeline:view"
data-kui="flip-card trigger:hover" · front face on data-kui="parallax-scale from:0.2 scale:1 timeline:view"

Entrances on a view timeline

The Alien 2077 game landing page — a biomechanical creature crouched on rock behind an oversized 2077, with a vertical ALIEN wordmark and a pre-order QR code
data-kui="fade-up timeline:view"
A Black Panther movie landing page — the masked character lit half gold and half violet, with a Buy Ticket button and a trailer thumbnail
data-kui="fade-left timeline:view"
The HBO Game of Thrones show page — Daenerys in close-up with a dragon on her shoulder beside the series title and a watch-trailer link
data-kui="zoom-in timeline:view"
data-kui="bounce-in-up, rotate-in angle:180deg, blur-in timeline:view"

Reveal, fade & skew

data-kui="reveal-once"
The MODERA furniture store as a spatial interface — a translucent glass shopping panel floating in a dark room above a low leather sofa, showing an armchair listing, a Great Value Deals card, and a team panel
data-kui="scroll-fade timeline:view"
The CoStar Group loan dashboard — frosted glass risk and LTV panels floating over a photo of the Dune Dweller House at desert dusk
data-kui="scroll-skew from:20deg to:0deg timeline:view"

Parallax

The full landing page of Alyssa Marlowe's web design portfolio, from the serif PORTFOLIO masthead through selected works, services and contact
parallax-y — distance:200px
  • Nothing is cropped. Every card takes its own screenshot's aspect ratio.
  • Whole pages, readable in place. No need to open anything.
  • The transform rides the card — not an oversized image behind a window, which could only ever show a slice.
  • Click any shot to open it larger.
The ZROBIM architects homepage — an oversized TERRA cotta wordmark set over a hillside house photograph
parallax-x — distance:190px
The EOSAI agency homepage — a dark cinematic hero reading "Imagining beyond reality" over a monolithic arch and ringed planet
depth-layer — distance:150px
The NUORBIT NFT marketplace homepage — a wide-tracked wordmark over a figure stepping through a glowing ring, with 27K/876K/20K stat counters along the bottom
parallax-scale — from:0.25 scale:1.18

parallax-rotate, pinned — half a turn unwound across a 200vh hold.

The Zenrixa creative agency homepage — a black 3D bust in orange visor beside the headline "We start from zero"
parallax-rotate — from:-180deg angle:0deg timeline:pin

Scroll mechanics

Catalog section C — 11 named effects, all real primitives through the shared JS orchestrator.

Pinning

  • pin-section holds an element still while the page keeps moving under it.
  • It inserts a spacer automatically, so a pin longer than its own container still reserves the scroll room it needs.
data-kui="pin-section distance:200vh"
Give Me 7 Minutes & Your Web Design Skills Will Take Off — Self-Made Web Designer — 7 Minutes
The Only 5 Web Design Skills That Actually Matter (2026) — Self-Made Web Designer — 5 Skills
  • Pinning (4) — pin-section, pin-until, pin-spacer, stacking-cards
  • Scrollytelling (1) — a stepped narrative synced to one pinned scroll
  • Horizontal travel (1) — vertical scroll drives horizontal motion
  • Media scrub (1) — a frame sequence scrubbed by scroll position
  • Navigation (1) — scroll-spy highlights the active section in the nav
  • Native CSS passthroughs (2) — scroll-snap-x/-y, set once, no scroll listener
  • pin-until is the sticky-sidebar pattern — no spacer inserted.
  • It borrows its scroll room from a naturally taller sibling instead of reserving its own.
The Daniel Lee mentorship site — a monochrome portrait beside the headline 9+ years of experience, with risk-management stats and 01/02/03 mentor tabs
01 inZOI — character studio
The MODERA furniture store as a spatial interface — a translucent glass shopping panel floating in a dark room above a low leather sofa, showing an armchair listing, a Great Value Deals card, and a team panel
02 MODERA — spatial storefront
The Abstract agency homepage — a pale sculptural form floating on a near-black starfield beneath the wordmark ABSTRACT
03 Abstract — agency
  • pin-spacer is the same primitive as pin-section, named for what it does.
  • The dashed box below is the real <div data-kui-spacer> — an actual node in the DOM, not a drawing of one.

data-kui="pin-spacer distance:120vh"

data-kui="pin-spacer distance:120vh"
  • stacking-cards is the pin primitive applied once per card.
  • Each card pins at its own offset, so the deck builds itself as you scroll.
Bazil's freelance portfolio homepage — a heavy black Webdesigner set over an outlined & Photographer, with a monochrome portrait rising between the two lines
offset-top:5.5rem
Michael Carter's portfolio homepage — a smiling designer in round glasses on white, beside the headline Carter is solving problems through strategic design and compelling visuals
offset-top:6.75rem
Mila Laura's portfolio homepage — two monochrome portraits either side of a stacked white DESIGNER wordmark on near-black, with a single yellow square as the only colour
offset-top:8rem
Yash Sharma's creative portfolio homepage — a heavy white PORTFOLIO wordmark over a figure in a dark suit, with Creative scripted in yellow above it
offset-top:9.25rem

Scrollytelling

  • scrollytelling-step writes data-kui-step onto the section as you pass through it.
  • Three separate things below read that one attribute with plain CSS selectors — the live line, the accent rule beside it, and the screen the frame is showing. No JavaScript of your own.

data-kui="scrollytelling-step distance:200vh steps:4 target:'.story-lines > li, .story-dots > span'"

One page, four stops

  1. One — the hero spends everything on a single promise.
  2. Two — then it explains itself, once.
  3. Three — then it says what it stands for.
  4. Four — then it shows you who is behind it.
The DECENTER website in four screens — a REVOLUTIONARY SERVICES hero over a starfield, a STORY SUMMARY screen with a video panel, an OUR MISSION screen behind a red-and-grey photo grid, and an OUR FAST GROWING TEAM screen of four staff portraits

Horizontal travel

data-kui="horizontal-scroll distance:300vh target:.track"

The EOSAI agency homepage — a dark cinematic hero reading "Imagining beyond reality" over a monolithic arch and ringed planet
EOSAI — agency
The Saxe fashion store homepage — a model in a brown coat standing inside an oversized Saxe wordmark
Saxe — commerce
The ZROBIM architects homepage — an oversized TERRA cotta wordmark set over a hillside house photograph
ZROBIM — architecture
The NUORBIT NFT marketplace homepage — a wide-tracked wordmark over a figure stepping through a glowing ring
NUORBIT — marketplace
The Zenrixa creative agency homepage — a black 3D bust in an orange visor beside the headline "We start from zero"
Zenrixa — agency
The CoStar Group loan dashboard — frosted glass risk and LTV panels floating over a photo of the Dune Dweller House at desert dusk
CoStar — lending
A Logitech Z150 speaker product page in near-black — the speaker lit from the left on a dark stage, with a price-and-add-to-cart card, a Clear Stereo Sound waveform panel, and an Easy Controls dial
Logitech — product
The NeoVision homepage — a woman in profile wearing a white VR headset beside the headline New Digital Universe
NeoVision — product
The Morozov developer portfolio — a monochrome headshot of a man in glasses and a bow tie beside a large Hello and a short intro
Morozov — portfolio
The Cars Sell Center configurator — a gold Mercedes-AMG C 63 S Coupe with feature callouts and spec cards for horsepower and acceleration
CarSellCenter — configurator
The Njey technology homepage — a glossy black humanoid robot picked out in yellow accent light beside the headline FUTURE
Njey — technology
  • Vertical scroll drives horizontal motion. Nothing here is a native scroll container.
  • A shared JS orchestrator translates the track, so the travel stays locked to page position rather than to a timer.

Media scrub

  • Four real screens, not a filter. target: points at four <img> tags that are already on the page, and the scrub reveals one per quarter of the range — so every frame is loaded before you reach it.
  • Scroll position is the only input. Nothing here is on a timer, so scrubbing backwards runs it backwards.

data-kui="sequence-scrub target:'.scrub-viewport img' distance:220vh offset-top:calc(var(--kui-pin-offset, 0px) + 2vh)"

Four music-artist websites swapping in frame by frame as you scroll

Navigation

  • scroll-spy marks the section you are currently looking at.
  • It mirrors that state onto whatever target you point it at as data-kui-active="true" — here, the matching nav link, styled with a plain a[data-kui-active='true'] rule.

data-kui="scroll-spy sections:'.spy-section' target:'.spy-nav a'"

The Botole water-bottle store — a matte black bottle on a white disc, beside a heavy Drinking Water Bottle headline and a Start Now button

Product

Botole — drinkware

An Apple AirPods Max product page in near-black — two views of the headphones over a vast outlined AirPodsMax wordmark, with White and Black swatches

Product

AirPods Max · dark

The same AirPods Max page inverted to near-white — silver headphones centred over a pale Air Pods Max wordmark, with Play video, More Product and Buy Product controls

Product

AirPods Max · light

An Apple Vision Pro store page — the headset lit from above under the headline Stay in the Orbit of Vision, priced from $2,400, with Book a demo and Virtual Tour buttons

Product

Vision Pro

The nocs. store showing Beats Pro — black headphones hung over an outlined Beats wordmark on warm grey, with a $399.95 price and a BUY block

Product

Beats Pro

Native CSS passthroughs

  • These two set once and let the browser take over — they only set scroll-snap-type and -align. Nothing runs while you scroll.
  • The track above moves itself; these wait for you. horizontal-scroll is not a scroll container — it is a pinned strip that JS translates from the page's vertical position, so you cannot grab it. These are real containers: scroll or drag one directly and it lets go on a card.

data-kui="scroll-snap-x target:figure"

scroll-snap-x — 1 of 9
A Black Panther movie landing page — the masked character lit half gold and half violet, with a Buy Ticket button and a trailer thumbnail
scroll-snap-x — 2 of 9
The Dua Lipa artist site — a portrait in a red ruffled dress against a deep red field, under an oversized Dua Lipa wordmark
scroll-snap-x — 3 of 9
The Alien 2077 game landing page — a biomechanical creature crouched on rock behind an oversized 2077, with a vertical ALIEN wordmark and a pre-order QR code
scroll-snap-x — 4 of 9
A Grammy Awards site on Best Rap Album — Kendrick Lamar in monochrome beside the DAMN. sleeve, track details, and a yellow by-the-numbers panel
scroll-snap-x — 5 of 9
The HBO Game of Thrones show page — Daenerys in close-up with a dragon on her shoulder beside the series title and a watch-trailer link
scroll-snap-x — 6 of 9
A Starboy artist site — a monochrome portrait of The Weeknd beside heavy display type
scroll-snap-x — 7 of 9
The Abstract agency homepage — a pale sculptural form floating on a near-black starfield beneath the wordmark ABSTRACT
scroll-snap-x — 8 of 9
The Hendrix Project site — a close-up of Jimi Hendrix behind an outlined PROJECT wordmark, with a 1968-2022 timeline
scroll-snap-x — 9 of 9

data-kui="scroll-snap-y target:figure"

The Daniel Lee mentorship site — a monochrome portrait beside the headline 9+ years of experience, with risk-management stats and 01/02/03 mentor tabs
scroll-snap-y — 1 of 4
Bazil's freelance portfolio homepage — a heavy black Webdesigner set over an outlined & Photographer, with a monochrome portrait rising between the two lines
scroll-snap-y — 2 of 4
Michael Carter's portfolio homepage — a smiling designer in round glasses on white, beside the headline Carter is solving problems through strategic design and compelling visuals
scroll-snap-y — 3 of 4
Mila Laura's portfolio homepage — two monochrome portraits either side of a stacked white DESIGNER wordmark on near-black, with a single yellow square as the only colour
scroll-snap-y — 4 of 4