Scroll lab

The scroll guide explains the tier ladder. This page is the ladder running.

There is no scroll listener on this page, no IntersectionObserver, and no library. Everything below is animation-timeline plus the reveal wrapper.

Your browser:checking…

• animation-timeline: view()no
• animation-triggerno

Reveals

The wrapper is an-reveal; the child carries the animation. One markup shape at every tier.

01

Entry

The reveal fires as the element crosses into view.

02

Range

entry 20% to cover 45% — tune where it starts and ends.

03

Once

On Chrome 145+ it latches. Elsewhere it replays on re-entry.

04

Fallback

Where timelines are missing, the content is simply here.

Stagger inside a reveal

The :nth-child index lands on the wrapper, but the delay is computed on the animated child, so the cascade survives the extra element. This is the interop that took a registered inheriting property to get right.

• 1
• 2
• 3
• 4
• 5
• 6

Scrubs

Progress is bound to the scrollbar, so these run backwards when you scroll up. Back and forth is the free default here, not a feature.

an-scrub-up

an-scrub-scale

an-scrub-rotate

an-scrub-blur

Parallax

Three depths, one token. --an-parallax-depth from -1 to 1.

backmiddlefront

Sticky stack

Cards stick, then shrink and dim as they exit. position: sticky plus a view timeline on the exit range.

01

Card 1

Keep scrolling. Each card holds its place, then recedes.

02

Card 2

Keep scrolling. Each card holds its place, then recedes.

03

Card 3

Keep scrolling. Each card holds its place, then recedes.

04

Card 4

Keep scrolling. Each card holds its place, then recedes.

That was all CSS

No scroll listener, no observer, no library. Everything above is animation-timeline plus the reveal ladder. Read how it degrades →