Scroll

The scrollbar as a timeline. Scrubbing a transition with the wheel instead of playing it on a timer is what separates a site that responds from a site that merely animates — and it is where most of the cost hides.

Section stacking transition

Each section sticks at the top and the next one climbs over it. The one underneath is never pushed — it is covered, dimmed and pushed back 6%, which is what makes a stack read as depth instead of as a list.

  • Mechanism position: sticky; top: 0; height: 100%
  • Corner 18px 18px 0 0
  • Veil solid #05050a → 0.62

Scroll snap

Flick the row sideways and it settles exactly on the next item. Four CSS declarations, no JavaScript — and the browser keeps its own momentum physics, which is why a hand-written version never feels quite right.

  • Snap x mandatory
  • Align center
  • Scroll padding 22% inline

Scroll-driven 3D carousel

Panels sit on a cylinder around the viewer and scroll rotates the ring. Each panel's place is set once at build time, so the per-frame cost is a single rotation on the parent.

  • Panels 5
  • Angle step 360 / N = 72deg
  • Radius (w/2) / tan(step/2) × 1.25

Scroll-driven scene transition

Scroll scrubs between full-bleed scenes: the outgoing panel rotates away in 3D as the next one swings in, with the caption cross-fading rather than being rewritten.

  • Scroll distance 420% of the viewport
  • Perspective 1400px, on the stage
  • Panel offset translateX 68% per slot

Fullscreen expansion transition

Scroll opens a small card out to full bleed. The card never scales — the window cut out of it does — so the artwork and type inside stay pixel-exact the whole way.

  • Scroll distance 320% of the viewport
  • Start window inset(26% 32%) round 18px
  • End window inset(0) round 0
All categories