https://takao.blog/en/tags/scroll/Recent content in Scroll on Commentary of TakaoHugo -- gohugo.ioenCommentary of TakaoSat, 13 Jun 2026 23:11:50 +0900https://takao.blog/en/web/css-scroll-driven-animations/Tue, 25 Jun 2024 00:00:00 +0900https://takao.blog/en/web/css-scroll-driven-animations/<img src="https://takao.blog/img/thumnail.webp" alt="Featured image of post CSS Scroll-Driven Animations: The Future of Scroll-Based Effects" /><h2 id="the-problem-with-javascript-scroll-events">The Problem with JavaScript Scroll Events </h2><p>Scroll-based effects have traditionally relied on JavaScript scroll event listeners running on the main thread, which often causes jank, dropped frames, and poor user experience. Even with passive listeners and <code>requestAnimationFrame</code> throttling, layout thrashing remains a persistent issue. CSS Scroll-Driven Animations solve this by moving scroll tracking to the compositor thread, enabling smooth 60fps effects without any JavaScript overhead.</p> <h2 id="key-concepts">Key Concepts </h2><p>Three core concepts power this feature. A <strong>scroll-timeline</strong> links an animation to the scroll position of a scroll container. A <strong>view-timeline</strong> ties an animation to an element&rsquo;s visibility within a scroll container. The <strong>animation-timeline</strong> property binds a named animation to either timeline type. Use <code>timeline-scope</code> to share timelines across elements in the DOM tree.</p>