Scroll-Driven Animations

[00:00:00]
>> Kevin Powell: Another really fun thing, we're looking at a lot of animations, we did the view transitions, we did animating from none, and we can also do scroll-driven animations with CSS only now. You might have already done some of these potentially with intersection observers, which are really cool, but we can do a lot of CSS animations now, or a lot of animations now, based on scroll position using some CSS features.

[00:00:24]
I would say be very, very careful with these please. It's a little bit like I talked about before, where motion can just be overwhelming,and it can just also be really tacky. So, [LAUGH] you want to be careful, not just even right now, I find my navigation, some parts of it I would speed it up.

[00:00:41]
And I'd also just make sure that it's not a little bit too much. Same thing with these scroll-driven animations, you can feel like you want everything, just, I can animate stuff as I'm scrolling, it's super cool. But just at one point, it becomes a little bit much. And there's one advantage of JavaScript scroll-driven animations, is that once it's fired,you can remove that and it won't do it anymore.

[00:01:02]
So if you have things animating onto the page, and then as you scroll back up, then they animate back off, and then they animate back on, you might not want that. With CSS, it's always going to just be animating, whereas with JavaScript, it's a little bit easier just to run the animation once, and then it's in that finished state.

[00:01:16]
If you have any major motion and other things, again, the preferred reduced motion, no preference, you might want to include the animations in there. We're going to create a really simple one for this, and I also want to look at a little bit of the pitfalls that you can run into with it as well.

[00:01:28]
If we jump in and we take into our styles here, let's just come all the way to the bottom. And maybe you'd even have a a layer for your animations. You could do that. Layer, animations, I don't know if we need it. If you feel like you do need it, we can put it there, I'm just going to throw it at the very bottom of my file.

[00:01:48]
I'm going to do an at key frames and we'll call it fade-out. 0% or there's different ways you can do key frame animations, if you haven't used animations before, we're keeping it very simple,we're going to say where it's starting from and where it's going to. So you could use percentages for your keyframes, or you could just say from opacity: 1) to an opacity: 0), which just means it's fading out, we're going from this to that, I think it's It's very clear.

[00:02:22]
0%, 100% here would be the same thing. Then, what we can do, is let's go find our hero,
>> Kevin Powell: And on the hero, I wanna fade that out. So we could say that, this has an animation: fade-out which is the name of the animation. You also want to give it, generally speaking, we'll do it the old school way.

[00:02:44]
We'll say this is three seconds long, and I'm gonna say forwards. And the forwards just means when you get to the animation, stay at the last frame. So if I hit save on there, and I go and look at my page, we'll go refresh it, over three seconds, the hero's fading away.

[00:02:57]
And then when we get to the end, we have the Forwards on there, so it stays at that last frame and it stays hidden. I'm actually going to take away the forwards, and I'm wanna to take away the time. We're just wanna to have a fade out animation on there, because I don't want time to be the eliminating factor here, the forwards you might want to leave, but in this situation, we don't need it.

[00:03:13]
In some situations, you might need it. So that's just testing and playing with it and seeing what happens. And then we're gonna add animation timeline here. And the animation timeline, you have two options, you have either scroll, or I'll just do it like this for now, or you have view.

[00:03:33]
Those are the two different ones that you can do. Scroll is gonna look from the top of the page all the way to the bottom of the page. Whereas view is looking at that element while it's inside the viewport. I think view is what you want most of the time, because it's very rare that you're worried about top of the page all the way to the bottom of the page.

[00:03:51]
The one exception that I can think of that's popular, is like a blog post that keeps track of how far down the page you scrolled, so you sort of have like, that's timeline going across the top. In that case, the scroll could actually would be what you want.

[00:04:06]
But if we just do view here, hit save, it's kind of broken, you can see it's working [LAUGH]. And as I said, go down more, it's fading out even more. The problem is the way that the view works is by default, it will start the animation somewhere else.

[00:04:22]
Let's also do this, let's do this on every section. We're just gonna say section, I'll just copy this. I don't wanna leave it there, but it's gonna show us better how it's working.
>> Kevin Powell: So, the animation starts as soon as the section is entering the viewport. So, this green section, it's already fade it out a little bit, though it's hard to tell.

[00:04:41]
And then, when it gets to the very top of the viewport, it's gonna hit the opacity of zero. Then this next one down there, as soon as it enters the viewport, it's starting to fade away, and as soon as the entire thing has reached the end of the viewport, then it hits that ending state of the animation.

[00:04:57]
This, again, we don't wanna do it on each one of them, but just to show you how this is working, or some of the other options that we do have for these, is to come in with an animation-r. And with the range as a shorthand, we have a range end and a range start are the long form, and range is for both of them.

[00:05:21]
In this case, I'm just gonna choose the start, cuz I wanna change when the animation is starting. I don't want it to start right away. We're gonna start with one though that's called cover, just to show you what cover does. So cover means the animation won't start until the element is fully in the viewport.

[00:05:40]
I thought it would be here. It has to be within the viewport. This one's making more sense to me. But it's when we're covering it. What we actually want, in this case, is exit. And this might seem a little bit strange, but it means we're starting the animation when that element starts exiting the page.

[00:05:59]
So, when the element starts exiting the page, which is right here, when that here hits the top, now it's actually starting to fade away. And then see how it clicked in right there at the end. It's coming back in a little bit. The reason for that, is I mentioned you might want to keep the forwards on here.

[00:06:19]
That will keep it at the last frame, so it won't actually, so that should, let's see. It's still doing it, we'll tackle that in a second. But we'll go through this one should fade away, and I guess probably click on again, right at the end there. But it's fading away, and so the animation is starting.

[00:06:37]
This one's, Kinda broken because it's so big of an element. But anyway, you get the idea of how that's working. So I wouldn't do this on all of them, but I would take this and move the animation range start just to be on the hero, because if it's on every section, it's kind of annoying, and I don't think users would appreciate that.

[00:06:54]
But it's something at the very top of the page, we could have it just fade away as it's going down like that. And that somehow also fixed that problem we had [LAUGH]. Let me just take off the forwards, and just see if we get that problem back again or not.

[00:07:09]
Yeah, okay. So there's the problem, and then, so the same thing as before, if I do forwards, it just means when we get to that opacity of zero, we're gonna keep that opacityof zero, once the animation is finished. And so now, with that there, once we get to zero, it stays there.

[00:07:25]
You wanna be a little bit careful with this, because we are like making text disappear, but for it could be a fun little effect where it just sort of fades off as the user goes down. Why I say you have to be really careful with this, though, with the sections it's kind of annoying.

[00:07:39]
You might be like, I could do something cool, let's just copy the same thing. Copy that, I could do the same thing on those cards, right?. [INAUDIBLE] Card,we could do that, maybe not on exit, though, cuz that doesn't make sense for those. And now that can be kind of fun, cuz you start playing around with it, you like your layout, everything's looking good.

[00:07:57]
And then you get to these Cards, and we'll do the first page first. And, actually, let's make a new animation for the cards. That's all the way at the bottom, let's do a fade in. So for fade in, all we're gonna do is switch the fade out, to a fade in, from a 0, to an opacity: 1.

[00:08:20]
And then let's go find that card again, that I just created, and the fade in. This is something people generally like to do, where as you're going down, then you can have your cards fade into the page. And in certain places, it could actually look pretty good, we might want to tweak the ranges a little bit, just to make sure that the right full opacity early enough on, you could even do translates on those.

[00:08:42]
So they're like sliding in a little bit, other things like that, you'd have a lot of fun with it, for sure. But, just be really careful, because on this page, maybe with these ones, it actually works well. And we'd want to be careful there, because there you can see it's coming in.

[00:08:55]
I'm just gonna put a both here, and see what happens. I think both might fix it for everything, yeah. So both is gonna keep it for the forwards and the backwards, so it keeps the zero if it's at the beginning of the animation, and it keeps the 100%, if it's at the end of the animation.

[00:09:12]
>> Kevin Powell: So, the cards fade in, everything's fine, the user can use it. But, because I used the general.card there, if I come onto here, it might be a little bit annoying, because then, these are all sort of like fading in,as I'm going down. I don't know if I like that as much.

[00:09:27]
And then, like this is still a little bit faded out. But then if I have other cards that are close to the bottom, like this just looks weird to me. And then, why is this one faded out a little bit and these ones, so you just wanna be really careful how you're using it, don't do any blanket statements.

[00:09:41]
And just be really careful with animations, transitions, and things like that. I will say, for the prefers reduced motion, don't worry about it for animation fading from micro animations, little movement is fine. Micro animations can even improve the user experience by telling them where to look. So for small things like this, it's fine.

[00:09:59]
If you start throwing things around the page as it's scrolling down, that's where you really want to be careful and probably put things in the prefers reduced motion media query.