JavaScript Scroll Animation Tutorial | Web Animations API + ScrollTimeline

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

⌚ 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

--

Come hang out with other dev's in my Discord Community

Keep up to date with everything I'm up to

Come hang out with me live every Monday on Twitch!

---

Help support my channel

---

---

I'm on some other places on the internet too!

If you'd like a behind the scenes and previews of what's coming up on my YouTube channel, make sure to follow me on Instagram and Twitter.

---

And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

[gregwholesome]

You don't need the 'defer' attribute on a module script, because a module is deferred by default.

[chrisicotec]

this is what i love about this channel... i was today years old when i found out that javascript libraries could be imported to the main javascript pretty much the same way you can import css libraries into css

[vaughnouano]

you are literally the reason why I can understand css and javascript better

[Michael-Martell]

If there’s an official organization for the marketing, and Development for CSS, I regularly think to myself that Kevin must be a part of the board or have stock options. Haha. Great tutorial as always Kevin!

[ratnesh]

Hi Kevin, Thanks for making my CSS learning journey easier and more fun. 😄

[wfl-junior]

This ScrollTimeline api is awesome. can't wait to have it by default both in css and in js.

[josvelema]

Nice one Kev, glad you do some JS every now and then. Hopefully you will get a bit less requests of doing JS ;)

[GiggityGlen]

Awesome thanks 😊 I was planning to create a custom Parallax component in my design system. I am currently using react-scroll-parallax which is a great library but it gives me satisfaction when I create my own component and use it :D

[eugenemark]

Perfect timing nice. I was just researching on this

[AmanRaj-skws]

Thank-you kevin i didn't know about this . I Will definitely use this scrolling effect on my website ❣️❤️

[donner]

How did you know I needed this for my capstone project!

[dave]

Agree with your last point about implementation. Definitely prefer intersection observer for that kind of UI.

[DanteMishima]

I'm absolutely trying this on my Eleventy site... Thanks Kevin

[jason-is-watching]

Great video explanation of the API! It would be good to see how this interacts with various lazy-load libraries, as I assume the JS imageHeight value could pose an issue!

[StewardRuss]

Kevin I am convinced you are spying on me, every week when I have a problem with coding and cant figure out how to fix it you come out with a video.

[Scuubie]

Good tutorial 👍 I've waited for you to use the imageHeight instead of 300px to actually finish the animation in the middle of the screen. You would accomplish this by subtracting half the imageHeight instead of 300.

[coops]

Thanks for this Kevin, I followed on and found that all my images were rotating the same rather than scrolling off each individual offset variables, quite interesting because i combed over to see the differences and couldnt find any.
inset the "it worked on my machine" meme

[Karthik-ugll]

Hey kevin, Thanks for giving awesome contents and learnt lot you are the person who made understand of css, how effiently we can use properties.I have one small request can you please make a video on showing tooltip for input fied error message while typing.Thanks in advance

[tonimichelcaubet]

Wow I randomly ran into this video, I have to do similar things these days for a project and I was planning on intersection observer but this approach is awesome, very revealing! made my day, thanks

(it would be great i you published the code in the videos and add it to descriptions 🙈)

[maurosampietro]

I actually coded this a few weeks ago: it’s a matter of listening windows scroll and resize and calculate document height /viewport height to get a %. Apply the % to the width of the scroll tracker. It’s like 10/15 lines tops. No libraries