Unlimited WordPress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
FREELessons:9Length:38 minutes

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.2 Easing Into jQuery UI

Your options are very limited when it comes to animating with jQuery. There are only two possible easing equations, for example, that can be used to control the speed of your animation. In this lesson, you will learn about a whole new set of easing equations offered by the jQuery UI framework.

Related Links

2.2 Easing Into jQuery UI

Hello and welcome back. In this lesson, we're gonna pick up where we left off in the last lesson with our animated text. If we were to refresh this particular frame, we can see our text animate in, and it's not working so I'm just gonna refresh the whole page. And then we should see our animation, there we go. And as we discussed in the last lesson, one of the main drawbacks of the animate function with the base jQuery framework is that we only have two easing equations that we can use. We have the swing which is the default, which is basically an ease in out. It eases in to the animation at the beginning and then eases out at the end. So it starts off slow, speeds up, and then slows down again at the end. The other option is linear where it just moves at a constant rate of speed the whole time. Well, with jQuery UI, we have a number of other easing equations available to us. And again, if you want to be able to use those, you need to make sure that your site is pointing to jQuery UI in addition to just the base jQuery framework. So you can find the URL for this opening pan in the course notes for this lesson. Once you open that up, let's go ahead and click on Fork to open a new copy of it. And then that new copy, all we're gonna do is we're gonna take this animation we've created and we're going to experiment with a few different easing equations. And if you remember from the last lesson, the easing equation is placed after your duration here. And here we have swing typed in and since we are pointing to jQuery UI in our settings, we can use all of the other easing equations. So for example, we have one called easeIn with a capital I quad, with a capital Q. And if we wait for that to refresh, we can see the results of that. Now all of the ease in and ease out are gonna be very, very similar. If we change this to easeOutQuad and this is for the banner of the top one or the top piece of text on that banner. If we change it to easeOutQuad, we can see the very end of that. And we see it slows down the same as swing does, it just it slows down a little bit more towards the end or it starts slowing down a little bit sooner. We also have easeInOutQuad which eases in at the beginning and then eases out at the end. And you can look at the jQuery UI documentation for an exhaustive list of those using equations but we have things like EaseInQuart to easeOutQourt, easeInOutQuart same thing with Quint. We have the same thing with expo and sign, insert and elastic so we have a bunch of different options here. So we're not gonna walk through all of them but I do wanna show you a couple of the ones that really stand out and one of the ones that I find myself using a lot is easeOutElastic and you'll see very quickly what that does. You'll see that it goes past the ending point and then just kind of wobbles back and forth into place. There's also one that's a little more subtle called easeOutBack and that one goes past the end point and then just settles back into place once instead of wiggling back and forth over and over again. And then there's another one called easeOutBounce and that one is gonna do just what it sounds like, it's gonna bounce into place which makes more sense if you have an up and down animation but that is another option you have available to you. So let's say we want this first one or this top one to be easeOutBounce and our bottom one to be maybe easeOutElastic and then we can see a couple of different animations going on at the same time. So just by adding the jQuery UI framework to our page, we're able to do a lot more with our basic animations. Thank you for watching and I'll see you in the next lesson.

Back to the top