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: 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 #css PUBLICATION PERMISSIONS:
Original video was published with the Creative Commons Attribution license (reuse allowed). Link: https://www.youtube.com/watch?v=VgS5CP7zlXE https://www.youtube.com/watch?v=ZRCzvK4DnlA