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!
✅ The Polyfill: https://github.com/flackr/scroll-timeline ✅ The Discord community: https://discord.gg/nTYCvrK ✅ Doing this with CSS only (@scroll-timeline): https://youtu.be/mzKfetD9YrA ✅ Intersection Observers: https://youtu.be/T8EYosX4NOo ✅ Bramus' interactive offset visualizer: https://codepen.io/bramus/pen/OJbZbaX ✅ Fantastic article by Bramus on this topic: https://css-tricks.com/scroll-linked-animations-with-the-web-animations-api-waapi-and-scrolltimeline/
⌚ 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: https://www.youtube.com/watch?v=VgS5CP7zlXE