Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Lessons:27Length:2.8 hours
Snap 1
  • Overview
  • Transcript

3.3 Easing

Hello and welcome back to animating with Snap.svg. In this lesson we're going to talk about easing. Easing is a way to adjust the speed of your animation usually to make it look a little more life-like. Let's take a car for example. If you're in a car you don't automatically go from zero miles per hour to 60 miles per hour when you hit the gas pedal. You have to use into it and it's the same idea when you're applying easing to an animation, you either want to ease into it or ease out of it. And there are other more complex types of easing such as elastic easing where it kind of bounces into place. And we're going to take a look at a few examples of how to do that using Snap.svg. So if we jump into finder or Windows Explorer if you're using a PC, again, we're going to make a copy of our latest folder which was site08. And we'll call the new copy site09. And let's open up site09 in your text editor of choice. And and I'm gonna start using this same animation that we created in the last lesson where we actually created a couple of nested callback functions. So we have our first animation which is the height of the base animating up. Our second animation which occurs when that's finished which is the translate animation were it's moving from left to right. And then a third animation with the height animating back to its original height. Now there are some complex customizable easing equations that we could put together. We're not really going to cover that I just want to cover the basics of easing using a few of the built in easing functions. So let's say on our second animation here. I don't want to do it on the first one because it starts animating right when the page loads, and so if there is easing you might miss part of it so let's wait till the second animation to apply any easing. So when we're applying easing to our animate function we need to include another parameter inside that function so our first parameter is whatever transformations we're applying to it, whatever properties we're animating. And our second parameter is the duration. Our third parameter right now is the callback function, but if we want to apply some easing, we're going to do that before we get to the callback function. So before the callback function, but after the animation duration I'm going to add some easing. And the way this looks and Snap.svg is we're going to type Mina, which is Anim backwards, dot, and then the name of the easing function we want to use. So let's say we want to ease into this animation we're going to call easein, and then we'll have another comma and then we'll have the callback function afterwards. So let's save that and see how that looks I'm going to jump back into Chrome and we're going to navigate to site09 and before hit Enter, let me explain again what's gonna happen. Our first animation, with the base of the height expanding outward is going to occur at regular speed. And then our second animation when it's moving from left to right, that's the animation that's gonna have the easing applied to it. So let's pay attention to that second animation when I hit Enter. And that second animation, it was kind of the opposite of what I think of as an ease in equation, it actually started off quickly and then slowed down towards the end, which traditionally is an ease out. So it seems to work a little bit backwards first Snap.svg. But if we go back and change this to an ease out. I'm guessing we're actually going to see what we would traditionally think of as an ease in. Either way, as long as you know how to get to the right type of animation you should be able to get the results you're looking for. So I'm gonna change this to an ease out. Save it and then we'll refresh it again. And remember, this time we're looking at the second animation. We're going to ignore the first one with the base expanding out. We're looking at the animation of it moving from left to right. So let's refresh that. There's the first one And then the second one, it starts off slowly and sped up towards the end. So that is traditionally more of an ease in, but here, we're calling it ease out. Now another function, another very eye-catching easing function is called elastic. And that's where it kind of starts off quickly and then kind of bounces into place towards the end, let's see what that looks like. Let's save our file and refresh. And there we go, very easy to look at, it's a really nice, smooth animation, it just kinda bounces into place there towards the end. We can refresh it and see it again. And if we wanted to, we could apply that to all three of our animations, but that might be a little bit of overkill. Let's go ahead and do it. So again it's gonna happen after the duration. So we have 1,000 comma space, and then will paste that easing function. Don't forget to put a comma after it before the callback function. And then we'll do the same thing down here. So all three functions now or all three animations, excuse me, are going to have this elastic easing applied to it. So we'll save that. And there's going to be a lot of bouncing here. Let's refresh. And that last one didn't seem to work. Let's go back to our code. Oh yeah we need to put that after the duration. Sorry about the confusion there. This one doesn't have a callback function but we do need to include that after the duration. Save that, and refresh. And now we should see what we're looking for, there we go. And you can go to the Snap.svg website, which again is snapsvg.IO. We can go to the documentation there and if you do a search here for easing, or just ease you can see a list of the easing functions here, so we have ease in, ease out. We also have an ease in out we can take a look at that one, where it doesn't an ease in and ease out, it starts off slowly, speeds up through the middle and slows down to again towards the end. And let's go ahead and do that for the middle animation again so we'll do easeinout. Save that, jump back into our page, and refresh. So there we go, we saw in that middle animation where it's moving from left to right, now refresh it again. As it's moving from left to right it starts off slow, speeds up, and then slows down again towards the end. A very smooth a way to show your animation. And it kind of gives it a more realistic look to it. But that's how you apply easing to your animations using Snap .svg. Thank you for watching and I'll see you in the next lesson.

Back to the top