2.4 Scrolling Mouse Animation

Welcome to project number four, where we'll create a scrolling mouse animation. Now what is this useful for? Well, a lot of things, but [COUGH] the one that I'm thinking about right now is when you have like a full width, full height background, or hero area, and you have a little tiny animation at the bottom showing you that you have to scroll to to see the rest of the content. So that could be a very interesting use case. I'm actually mocked something similar in CodePen here. I went ahead and wrote most of the HTML for it, and also a lot of the CSS. So this is what I'm talking about, full width full height hero area showing the title, maybe a subtitle. And right over here we're gonna put a scrolling mouse, or a mouse with a scrolling animation that tells us that we can scroll down and find the rest of the content. So I'm not going to go over HTML part here, that's not important for this particular course, it's just basic markup. And for CSS I'm just doing a little bit of body styling. And probably the more interesting part about this is the styling of the hero. How I added this image is actually using an SVG image as a background, which just repeats. And the way I got this, I didn't write this code by hand, that would've taken me hours. Instead I used website called svgbackgrounds.com. I used this SVG, just changed the colors, played around with these buttons a little bit, and just copied the CSS output and I pasted it right here. Then, I just added width height 100% and 100% view port height. Aligned everything in the center, and that's about it. Now for the actual mouse animation we're gonna be using this graphic that I made in Sketch. So the way I wanted to animate this little point here jkust gonna move down and also fade out. Then it's gonna reappear here and repeat the animation. Let's see how we can create that. First of all, I'm gonna create an HTML right over here and a div with a class of mouse. And in the CSS, I'm simply going to position that div absolutely so hero, mouse and we'll set position absolute and a bottom value of two runs. Because we're aligning everything with Flexbox it's gonna be positioned in the center. Now, let's scroll further down, and let's see how we can actually implement that icon from Sketch, or how we can bring it from Sketch to, CSS or to HTML. Well, this is an SVG, or it can be transformed into an SVG really easily by selecting the entire icon, and simply copying the SVG code. There is an option here, it's off the recording area, I do apologize for that. But it says copy SVG code, you simply copy it from here, and go back to your HTML. You paste that in and it looks something like this. And just like that we have an SVG icon in our code. Now we don't actually need all of this code. There are things here generated by Sketch that we simply do not need, but it's fine. And I'm gonna keep it. It doesn't hurt or anything, so I'm gonna keep it. The only thing that I'm interested in here is this ellipse, which corresponds to this little point. And this is what we're actually going to animate. So if I take it out that also disappears from my SVG image. So the ellipse I'm gonna give it an ID, so that I can target it easier in CSS. I'm gonna call it scroll-pointer and I'm gonna the leave the rest of the values just like that. So back in CSS I'm gonna go all the way down here, and we're gonna execute step number three, steps one and two were to apply basic body styling and styling for the hero and content. So step three is to animate the scroll pointer. So for that let's create some key frames I'm gonna call this scrollDown, and we're gonna do the following. I'm gonna say 0%, I'm gonna transform, again translate3D, and I'm gonna use (0, 0, 0), so that's the initial position. And I want it to be positioned right where it is right now. And then, at 100%, I simply want to transform it so that it moves down. So we're gonna use, again, translate3D. 0 for x, 25 pixels for y. So we're moving it vertically. And 0 for z. 25 pixels is just the value I got after trying things out here, so after I move it down, trying to find pixels, I see 10, 20, 1, 2, 3, 4, 5, it was sitting at a correct position. So let go ahead and add that animation to the scroll pointer, so we gonna target that SVG, let see if I gave it an ID here. Now let's give it an ID right now, so ID mouse icon, and then back in CSS we're gonna target that mouse icon and also the scroll pointer which is the idea of that ellipse from the SVG. And then simply add animation, scroll down let's set it to two seconds. And I'm also going to add a custom easing that I got from easings.net and it's actually the same cubic Basean that we used In the previous project. Oops, I actually didn't copy that correctly. Okay, and let's go with infinite, so that the animation will just keep going on and on. So let's see what we have. All right, let's add opacity to the mix. Now, I want the opacity to not start at 0%, I want it to start at about a quarter of the animation. So I'm gonna set the opacity to 1, and I'm gonna set the opacity to 0 at 100%, right? So that's how it goes. Not bad, but I want the transform here, to start, or to be active also at about 20%. And that's gonna create a little bit of an effect here, see? So see the difference. Just let me go back to 0%. Yeah, just kinda jumps up a little bit and then moves down. But by adding an extra step here. Now it makes the actual translate to 25 pixels a bit faster here. It's a tiny detail but I think it adds a little bit of an effect that's pleasing to the eyes. And that's all there is to it, really. It's a very simple animation. Multiple step animation where we're changing to properties, transform and opacity. And by using a custom easing and infinite here, we're making sure that it goes on forever and it has a nice bounce effect. So that was project number four. In project number five, we're gonna create the hamburger menu item that will transform into a crust icon when we click on it. That's coming up in the next lesson.