Video details

JavaScript Scroll Animation Tutorial: Web Animations API


Scroll-based animations used to be pretty hard and usually meant turning to a library. With the Web Animations API and ScrollTimeline, it's now surprisingly easy to do!
🔗 Links
✅ The Polyfill: ✅ The Discord community: ✅ Doing this with CSS only (@scroll-timeline): ✅ Intersection Observers: ✅ Bramus' interactive offset visualizer: ✅ Fantastic article by Bramus on this topic:
⌚ Timestamps 00:00 - Introduction 00:57 - Creating a scroll tracker - HTML and CSS 02:50 - The polyfill 03:55 - Creating a timeline for the scroll-tracker 06:34 - Attaching the timeline to the scroll-tracker 09:36 - Changing the scrollOffsets 10:20 - Animating only when an element is in the viewport 17:52 - Animating multiple elements 20:41 - Animating when the element is in different locations on the page
PUBLICATION PERMISSIONS: Original video was published with the Creative Commons Attribution license (reuse allowed). Link: