Incredible scroll-based animations with CSS-only

Been playing with them a little bit up until now, and it's finally time time for a deep dive into scroll-timeline and the scroll() and view() value functions.

In this one I look at a few different effects, like a scroll watcher, fading in images as they enter the viewport, moving elements horizontally as we scroll down, and a few more things as we explore everything we can do with scroll-timeline, and I also get into the Polyfill and some of it's limitations as well.

🔗 Links

⌚ Timestamps
00:00 - Introduction
00:28 - scroll watcher
02:43 - a bit more on the scroll() function
04:02 - fade in images as they enter the viewport with view()
06:14 - offsets with the view() function
08:40 - the animation-range property
12:18 - prefers-reduced-motion
14:20 - entry and exit keywords for animation-range
16:04 - working with scrollbars that are not the main viewport
20:33 - the hero area animation
26:49 - browser support

#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!

[iboy]

Why not say up front that it doesn't work with Safari and Firefox?

[alexway]

Cool stuff. But it was difficult to understand or replicate horizontal scroll animation (16:04 - working with scrollbars that are not the main viewport), cause essential part of the code is behind the scenes.

[MikkoRantalainen]

This kind of animations should be always considered progressive enchancement in the future, too, because some users will prefer no animations. As a result, the content must be always usable without the scroll effects, too.

[the-raveen]

Dear CSS Guru, I'm your Disciple. 🙏🙏

[michaelvandinther]

C'mon full browser support and following that, a library we can DL.

[kevinyishawu]

Got me sooo excited at the start, only for me to feel down at the end with the low support part.
Now I'm wishing I didn't watch the Video😭

[jakekinchen]

Hey Kevin, what do you think about StyleX? Is it something that would help or hurt your workflow?

[blueyZee]

The animation-timeline doesn't work when i set overflow to hidden. Is there a workaround to this?

[KOBE__]

I’m beginning to love CSS so much more these days. I really appreciate your work in keeping us in the loop with the latest CSS functionalities. 👌

[cmukama]

This is exactly what I needed to refactor out an old JS animation library. The creator left 3 years ago and nobody knew how to deal with it. Thank you Kevin

[myfreedom]

that dont works on firefox... so unable to use it in production. Do you know when FF will add this CSS update ?

[m.arslansarwar]

You've made me love CSS. You've no idea how much you're helping us with your content.

[___rituraj___]

Hey man, when it comes to CSS, you always rock and outshine others🚀🔥
So why don't you curate a structured playlist by arranging all your made videos in such a way that a beginner can learn CSS from basics to advance and such playlist will also get a good reach.
It will also help self taught programmers to learn from one place instead of hopping from one resource to another.

[AniketEdot]

Hey Kevin! thanks for this video. It really was informative. However i noticed when i used the animation-timeline: view() property, it seems to work on all devices, EXCEPT safari and ios/ipad os. Is there anyway to fix this? or do i have to use js ? Thanks

[JasonAul]

Is there a repo for this demo you showed us?

[santoshparker]

We all are blessed to have a teacher like you kevin .

[szymr]

Hello! Thanks for this explanation!
BTW There is any way to fix 'header-image-animation' if sporadically it doesn't work? I noticed after quick scroll to the top the opacity is still set to 0. When I open WebTools it's appears with correct opacity.

[mimoduocss]

I was looking for viewport based animation timeline and it was view() the entire time! My brain is too mushy for MDN docs, thank you!

[Itsrahatchowdhury]

animation-timeline: scroll(); is not working . what can i do?

[rebell]

It's so cool to see more and more animation functionality becoming built-in to CSS. 👍🏻