JavaScript Scroll Animation Tutorial: Web Animations API

Channel:

Coding Tech

Subscribers:

725,000

Published on July 25, 2022 1:52:51 AM ● Video Link: https://www.youtube.com/watch?v=ZRCzvK4DnlA

Duration: 25:41

7,224 views

241

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