Scroll-driven Design.

Scroll-driven design treats scroll as the primary interaction. As the user scrolls, elements pin, transform, scale, color-shift, or animate to advance the story. CSS Scroll-driven Animations (rolled out across Chrome and Safari in 2024) made the technique performant without JavaScript, opening it to mainstream adoption.

Best Use Cases

Product feature showcases (Apple, Stripe, Linear), explainers, brand storytelling, and editorial features all benefit from scroll-driven moments. The technique creates a sense of progression and discovery that static layouts can't match.

Pitfalls

Heavy scroll-driven design can disorient users, fight the browser's expected scroll behavior, and accessibility-fail for users with vestibular sensitivity. The best implementations respect prefers-reduced-motion and provide an equivalent non-animated experience for users who opt out.