Scroll-linked Motion Implementation Boundaries

Large Theory

Scroll-linked motion commonly appears in three implementation paths: CSS scroll-driven animations, JavaScript timelines/ScrollTrigger, and smooth-scroll libraries such as Lenis. They solve different problems and have different boundaries. CSS fits lightweight progress/reveal but has compatibility limits. GSAP fits complex pin/scrub choreography. Lenis fits WebGL/parallax sync and immersive branding, but changes native scroll feel.

Small Points

1. Decide whether scroll motion is needed first: reading progress, chapter reveal, product-state causality, and spatial mapping can be valid; ordinary lists, forms, and admin tools usually do not need smooth scroll.
2. CSS animation-timeline, scroll(), and view timelines can reduce JS scroll listeners, but scroll() and related features still require Baseline/compatibility checks and fallbacks.
3. Pin/scrub sections must be short, skippable, and complete; do not hide core information inside frames that require precise scrolling.
4. Lenis/smooth scroll must be tested with anchor links, PageDown/Home/End, focus scrolling into view, browser back/restore, sticky, nested scroll containers, and touch inertia.
5. ScrollTrigger, Lenis, RAF, and resize observers need cleanup on component unmount; height changes after layout or font loading need refresh/recalculation.
6. Under reduced-motion, disable scrub/parallax/smooth scroll and preserve static keyframes, section titles, and normal reading order.

Design Judgment

Scroll motion is healthy when users can read at their own pace and skip motion without losing information. It fails when the page becomes a long pinned track, scroll distance is unpredictable, anchors and keyboard break, or mobile scrolling feels captured.

Implementation Notes

Write a scroll brief first: goal, chapters, trigger element, scroll container, technical path, fallback, reduced-motion, anchor/keyboard, mobile, and performance budget. For simple progress bars, prefer CSS or native sticky. For complex timelines, use GSAP/ScrollTrigger. Add Lenis only when brand storytelling or WebGL sync truly requires it, and provide a disable path. Layer CSS scroll-driven animation with @supports (animation-timeline: scroll()).

Counterexamples/Risks

Enabling Lenis globally and breaking admin-table scrolling, trapping users in a long pinned first viewport, controlling pricing/compliance copy order through scroll scrub, adding parallax to every mobile section, losing scroll position on browser back, and keeping smooth scroll active under reduced-motion.

Case Study

MDN explains that CSS scroll-driven animations animate along a scroll timeline instead of the default time-based timeline, while its scroll() documentation also marks the feature as not Baseline because some widely used browsers do not support it. Lenis' own site acknowledges historical criticisms of smooth scroll as hacky, inaccessible, and not performant, and positions itself around standardized scroll experiences and WebGL/parallax sync. The reusable lesson is that scroll motion is not default beautification; it must be chosen carefully around technical boundaries and user control.

Source Links

MDN CSS scroll-driven animations: https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Scroll-driven_animations MDN scroll() animation timeline: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/animation-timeline/scroll CSS Scroll-driven Animations spec: https://drafts.csswg.org/scroll-animations-1/ Lenis: https://www.lenis.dev/ Lenis GitHub: https://github.com/darkroomengineering/lenis GSAP ScrollTrigger: https://gsap.com/docs/v3/Plugins/ScrollTrigger/