Six cards, each with a staggered animation-range. Scroll to see them enter one by one.
animation-timeline: view().
Cards appear fully visible without animation. Try Chrome 115+, Firefox 126+ (with flag), or Safari 18.2+.
Each card starts its animation at a slightly different scroll position. Card 1 begins fading in immediately as it enters the viewport. Card 6 waits until it is halfway visible before starting. The overlap creates a cascading effect — the previous card is still animating when the next one begins.
This card starts animating as soon as it enters the viewport and finishes when 40% is visible. It is the first in the sequence — it completes before Card 2 has even started.
Card 2 starts 10% later than Card 1. The 10% overlap means both cards are animating simultaneously for a brief moment, creating a wave-like cascade.
By the time Card 3 begins, Card 1 has finished and Card 2 is midway. The cascade creates a visual rhythm that guides the eye downward.
Each card maintains a 10% offset from the previous one. The result is a smooth, evenly-paced reveal that feels natural rather than mechanical.
Linear easing keeps the animation consistent. No cubic-bezier curves needed — the scroll speed already provides natural acceleration and deceleration.
The final card starts when it is halfway into the viewport and finishes just before it is fully visible. By then, the reader has already scrolled to the next section.