CSS: Scroll Driven Animations

and it will then that'll show me 5th once the element is 50% on, then it will start to animate itself. So that that could also be helpful Alright. We'll catch you later.

Wow.

from you can go from 0 to 1. Mhmm. And It's the classic SVG draw on technique. Yes. If you've ever seen SVGs that, like, draw themselves on, you're just attaching

path that is sort of scribbled on the screen, Where's the fixed header? Oh, this one's cool. The fly in contact ESLint? how far an element is on page. Right? So there is scroll, which is I have a DIV, and it can scroll from top to bottom. And I'm going to use that to go from 0 to a 100% of the actual element. So here's an example right here. I'm scrolling, very

where's the key frame here? if you want to control something with a scroll, it had to be done on the main thread because you're literally listening an animation. So you say at 0%,

that offset to a scroll position.

I saw I had to go into the dev tools for scroll driven animation thoughtfully done. Animation can be done to add context. It can add to add cues to what's going on on the website. I think that this can be used for a lot of good, Timeline defines

And there's, again, there's entry entry crossing. So as soon as it cracks that on and then exit and exit crossing for the additional values there.

According to can I use, it's behind a flag?

on that SVG JS Wes should the animation pnpm. And in our case, I want to end are not done on the main thread. So, previously,

Other cool examples is I did a little TikTok on this one right here, the the idea here is that the polyfill has been loaded.

Exactly. And previously, you had to do that in stroke dash offset 0. So, basically, go from your default, which is 1, to 0,

a this is an SVG a stuck state in CSS without JavaScript, the CSS and you can see how the the cards are scaling up and scaling down as you scroll.

When this thing is in its stuck position, like a position sticky, but once it's stuck to the top or or to the bottom or wherever you're sticking it, in this case, he is sticking bit of a a hack here right there, that's a 100%. Right? And I'm also using this with position sticky, Reading progress indicator. Right? So JS you scroll through the page, with position sticky. And I thought that this this is wild because JavaScript,

on scroll driven animations.

to be the stuck Scott, and I even tried it. I went a little bit further. So if you still want an animation, So let's get into So let let me show you the stuck header.

Yeah.

on Firefox.

based on when they are stuck and unstuck, you have to use, like, knowledge with you, so all of your key frames, all of your easings, all of your film modes, all of your direction.

Great. But I can't use it. And now I'm stoked to learn I can't when you told me that you were using this in a real site, I could not believe it. Now

So

animation value in it oh, one more thing. You just want them grouped together in a different layout entirely. Right? Yes.

which is is pretty nifty. I think I still would like a then move the animation along throughout the timeline.

Oh, no. He doesn't have it. He doesn't have the polyfill loaded on on the all the examples.

Sick. Wow. That's amazing. I'm I'm really stoked for this.

Cover flow. That's in Firefox with a polyfill? Yeah.

That's something we've all had to do quite a bit. I mean, I I feel like I've run into that situation a ton. You're building any sort of scrolling area that's contained. You kinda want those shadows in there to indicate there's more data here than you might be seeing. Yeah. Or, like, a fixed header as well. You Node, you wanna you wanna throw a little shadow or you wanna style it differently.

I gotta get moving on this right now. I gotta in fact, I gotta we we're canceling the rest of the episodes. I gotta spend some time

of the table so that when he scrolls, with CSS.

The website works fine. Yeah.

Or you just you just fall back to no animations. Man, the options are way better for this than I was expecting. When when we when we had this episode on the calendar, I was thinking, I I was taking the role of the classic CSS commenter.

what's the downside to using the polyfill?

but this is that's pretty close with without any JavaScript.

I'd like I hit a couple bugs last week. Not bugs, but, like, I hit a couple, like, how do I do that? And, like, I've it caused me to really dive its entry.

one, view transition, starting style. There's so many cool new APIs. But this one in particular feels like it has a lot of depth into what you can accomplish with it. So I'm stoked to see some of the things that you you're gonna be talking about today. I'm also stoked to see my Sentry dashboard because it does not show any major errors at this time. Because guess why? We use Sentry to fix those errors on the Syntax website. So if you're having bugs and issues and stuff on your website, you need visibility into that, and you can get that with Sentry. So you just sign up for Sentry. You drop a a script in your site. Next thing you know, you're cruising. You're getting all your errors popping in. You're getting those stack traces. It's looking at your source maps. It's telling you exactly to know

already myself, and to make a better website experience, especially, like, when you look at a lot of the native stuff that Apple has.

where the problem is and who's hitting that problem. Maybe there's an obscure bug with a 1 specific browser. You're gonna know what browser it is and where that bug is. You can go fix that thing. That way, people don't have an issue. So if you wanna check this out, head on over to century.i0forward/ Maybe not animation range.

Yeah. This is pretty exciting. So we had Bramus on the podcast a couple months ago, and he kinda talked a lot about that. But I thought we'd do, like, a an example of the actual API now that it's starting to hit the browsers. I've used it in a couple websites And then as I scroll, it's showing me the view timeline is 11% or

syntax. Send them to get 2 months for free. Alright. Let's get into it. Scroll driven animations.

Cool. I'll be stoked to see what you do for progressive enhancement here. This is one of the ones that I've been kind of staying away from. Oh, man. You are just

The elements just do not scale up on their way in.

9? Starting to see that. Now that there's, like, 2 of them, you're starting to see the the information being a little bit really clicked for me when I checked out this tool that Bramas made because you can change the values and sort of visualize it. And then when I was debugging everything, There's view based time lines, which is what I've been doing. Here's another example I have right here.

What's interesting, Wes, is that

Oh, okay. That is 4. Yeah. Oh, yeah.

can I use

Okay. Yeah. No. This shows it. What was I looking at? I was looking at scroll driven

So, again, it's something that Node start to use. Sorry, Wes, to cut you off. If you wanna further enhance progressively

enhance this, let's say you weren't happy with the way this looks,

you can

if the browser supports this feature. And if it doesn't support this feature,

you could always use oh, scroll timeline. Sorry. That's what I was looking at.

as being behind a flag, but MDN and baseline show it as being available in Chrome? So I think this might be a situation where can I use is,

a, like, supports query certainly, you can have it. You know, if you're only serving that polyfill with people who need it, then Yeah.

I Maybe that's animation.

So pretty exciting. There is a polyfill both for the JavaScript and for the CSS, so you can use it today. Or you can go ahead and and start to use it. The other thing is you it it is progressive enhancement, meaning that that. A lot of these examples are gonna be coming from scroll dash driven dash animations dot style. This is Bramus' website. He also has Wes really good video course and then put your stuck state in the 100%,

shows scroll timeline

But you can see, here's my card.

I'm waiting for them to hit right about there to be a 100%. There's really cool set of dev tools that Bramus has also Node, which allow you to visualize animated once it's off the screen because a lot of times, you're simply just scaling up or sliding in from the side or doing something like that. So you can change those values from draw itself as 0 to a 100%. Right? The other one, which I think is is

And then So are those using viewport units or essentially the viewport present percentage?

And the other property we have is animation that we need to know about. You you take all of your existing CSS to really see, okay, where does the browser think this is at right now? So really good tooling around this, really good demos on here, some really good videos from Bramas, as well.

where does the view timeline start and finish? start sharing the screen.

50 viewpoint units. So you you you're saying 50% animation range. And so let's look at the actual value here. So let's look at the view ranges visualizer,

in.

because

where they are. So if I go to my dev tools here,

basically, how to do this make sure they are on the page here. Let's let's take a look at this example over here. Let me open up Firefox.

the code here is animation time line is a view, so how far onto the page this element is, but now a a resize observer to check if it's stuck or not. And you can use a little the 1st column

which is Yes. Let me let me show you the the code beside it. So to different elements depending on how far As with everything, once we get new tech, Just fine because of the adjust your layout accordingly. Yeah. Exactly. Yeah. Maybe you don't want them off page. Or if you if you do have to put, like, an initial why it looks a little bit funny, and that's why I had to use that

this is I I had to ask on Twitter, range.

So, basically, scroll driven animations

based on its entry point Oh, this one, he has a polyfill loaded right here.

These little cards right here, So,

plus into the documentation as to how it all works and all the nitty gritty. And I was like, man, this is this is pretty flexible. So Wow. So you you used it on real things or just demos that you're you're experimenting? No. So my my TypeScript site that's coming up has I can even I can even show it to you. Here, let's over a time line that is controlled by your scroll. So you're sort of scrubbing through the animation, And, it's it's unreal, all the fun stuff you can do with it. I'm so stoked. This this Really? it's gonna be cover, cover 0 to a 100%, meaning that the animation is going to start as soon as the element cracks onto the screen.

and then start which, Here we go. The key frame is simply just we talked about animation time line, which is is it based on scroll or view? So the named Node, real quick, is

0%. And then as soon as I'm doesn't hit until it Now that data of how far you are scrolled or how far into the view an element is is now available in CSS, so it can be done

And this exists within Chrome today, or is this something that I do install? A Chrome extension

normal and normal here, off the main thread, which means even more buttery smooth, breaks onto the page very similar to, like, a intersection observer if you've used that into JavaScript API before. And then you see JS it scrolls through the page, you go from 0 to a 100%, scale them up from 0 to a 100% and it the escalator is simply stairs. Right? Look at that. It still works just fine.

I want to to do this, at 50%, do this, and at a 100% do this. So you can say to, from, and you can make all of these different key framed animations even more useful,

as soon as it breaks onto the screen, it's going to be

animation And the the animation draw out of out of date or out of sync. But the so this is the example in Firefox where it is not supported, I scroll the thing into view, which is wild.

And, normally, when you apply or when you turn on that animation,

and then it go infinite or or repeat 3 times and then finish. The difference with this is that we still use CSS key frames, but instead of it playing itself over time, Pretty exciting stuff.

All that stuff stays except for the the actual amount of time that the animation will play out, and we add 2 new animation properties, which is animation timeline and animation the names of the columns will stay there, and the rest will go underneath it. That's a great use case for position sticky. However, if you wanna style them differently when it breaks right onto the page, which is cover. I'll explain that in a sec. And then end, you can animate up to 99% and, I think it's going to be spell out So if we take a look at the the this example right here, by default,

scroll driven animations play themselves fully scrolled if the animation is people are gonna abuse it. However, I think that animation can be That's that's all we have for today. Hopefully, it gives you a good idea of scroll driven animations. We got the view. We got the scroll. You've got your key frames that are scrubbing them and then a whole bunch of options to tweak them here and there.

over 5 seconds, Let me make this a bit bigger.

not with time, but with your actual scroll wheel. Now there are 2 new CSS properties Super easy. Actually, let's let's try the scroll driven Very doable. One more thing, which this blew my mind, is Dave Rupert has a blog post about how he used scroll driven animations to give a table a shadow,

range. So let's first talk about timeline.

cover to contain. So contain is different than cover in that see my scroll driven animations.

JS soon as it peaks its 1st little Vercel above the fold, it starts at 100%. Pixel.

Yeah. And then it shows all of its Vercel. And then as soon as it poops its last little pixel off the screen, it gets to a 100%. Right? So that's the default if you wanna animate something all the way up. But in many cases, you can basically just set the last state of the key frame somewhere else in your CSS. So you could have a div. Like, for example, more commonly, the entire body of a page will be scrolled.

before it before it will even start itself.

And then in this case, there's you can only do percentage, but you can use anything. You can calc. You can use a variable.

it must be a 100%

you don't want your element to be fully

If it's in JavaScript, you can put a JavaScript value in there. My case, I did 50 view port height units, but I think I can do something like 50%. Oh, that's over the first 50% of the viewport. So you can see how they're going from 0 to 50 percent as I scroll up. So this is referred to as a view based Probably that it's it has to run it. It's probably using resize or not intersection observer, and it's running on the main thread.

peaking its pixels on the screen Let's find an example that he has here.

as this thing is more on the page, Look at this. Let's this is Firefox. It doesn't it's not supported.

you can show the progress indicator up at the top here. This is just a little red bar that goes from 0% wide to a 100% wide. And Yeah. And we should say on top of all of this because, you know, I don't know what it looks like on your end, Wes. But for me, when I'm looking at your screen recording here, it is a little choppy. It is very smooth. And if if you're seeing this and it has a lower frame rate by the time you're you're listening

it you give it a set of time. Right? You say, put this animation So scroll based timelines are based on how far an element is scrolled. This could be the body. This could be another element.

And then you can also name a scroll timeline, which allows you to reference how far you are scrolled for JavaScript scroll events and then passing that data to your CSS.

and that then is scrubbing the animation that's, whoo, this is just using CSS, if if you can believe it or not. But this is a API that's hit CSS and JavaScript.

and it goes from

is how far you have scrolled on the actual page. Oh, sorry. I gotta make this a bit bigger so I can get the scroll bar.

going to be controlled by how far you are scrolling an element not because I don't care how far I am scrolled in this body here. I care how far each of the elements are on the page. And in this case, I'm you can simply do it in CSS.

So you see this element right here, where cover. Like, as soon as it starts peaking on the screen, I want it to Scott, but then I want it to finish, like, kinda, like, halfway through. Right? So what I had to do is I had to change the animation timeline, so I changed it based on if you it doesn't work, your elements are simply just on the page. You know? Just So much really cool stuff you can do with it. I certainly

Welcome to Syntax. On this Monday, hasty treat. We're gonna be talking all about scroll driven animations.

We're gonna be giving you a little bit of an introduction as to what they are, what you can do with them, and just how incredible of an awesome new technology this is for the browser. My name is Scott Tolinski, and with me JS always is Wes Bos. What's up, Wes? Hey. Stoked to talk about this. It's such a cool

like I think it's, like, an hour, hour and a half, or whatever that you could just blitz through to sorta get the idea of of how everything is working. So key frames in in CSS, it allows you to,

you're able to apply an animation are based on the CSS animations API. Both the CSS CSS animations API and the actual JavaScript of the viewpoint, once it's hit that, then end the animation range. By default, it's going to be 0%. So if I just, like if I type, that you must install that's added to dev tools.

And the way that it works is that well, there's sort of 2 ways that it works, and I'll get into that in just a second. But as you scroll, timeline, in CSS, we've always wanted a stuck selector.

you've scrolled that element.

you're too much, Wes. This is this is gorgeous looking awesome. So

Yes. I we should say that this has the potential to make a lot of very obnoxious websites.

animations API, and they work with both of them in this case.

And and then we start seeing, like, oh, now we can do scroll driven animations on the web, and we have the view transitions being added and all this type of stuff. It's like, we want those.

That's why people say web apps don't feel like native apps. A part of it is because of the this type of stuff. So these scroll driven animations very helpful. It is only in what's the values right now? So it's only in Chrome and Edge right now. However flag. There is a no. It's not even not even behind the flag.

animations.

if you want to be able to access how far somebody is on a scroll somewhere else, you can give that Scott a custom name. It's almost like a variable, has a dash in front of it, and you can then access it somewhere else in your CSS, kind of like a CSS variable, which is pretty nifty.

to this, I just wanna say it is very smooth. Yeah. And

that's a a great point JS that and Shoot.