7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
FREELessons: 33Length: 4.8 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.2 jQuery Animation Refresher

Hello and welcome back to Practical Web Animation, in this lesson I wanna give you a quick refresher course on jQuery animation, and and we're gonna start with a fresh Pen. So we don't have a starter pen that I want you to fork just yet. We're still starting from scratch here but we do wanna use jQuery. So once you create your new code pen I want you to jump into your settings jump over to the JavaScript JavaScript tab and make sure that you include jQuery here, and again you can get to it very quickly, using the quick had to drop down menu just click on jQuery here, and it will add it to one of these text fields. So we can save that and then let's get started with HTML let's create a div here, and we'll give it a class of square. Once we're gonna create a square in the browser window, so we have our opening and closing divs tag with a class of square will create a CSS rule for the square class .square and then in between curly brackets will give it a width 100 pixels, height of 100 pixels, and then a background color of your choice. Let's just do blue for now for the sake of ease and here we have our blue square. So in our JavaScript, let's go ahead and refresh ourselves first of all on the basics of J query one of the most powerful features of jQuery is the ability to very easily point to an item in the dollar. Or an element on your on your browser window or on the stage, and with a jQuery we would do that using css selectors, so the way that looks in J. Query is we type a dollar sign and then inside parentheses and inside quotation marks, we're going to type in the C.S.S. rule or selector that we want to target. So if we want to target the square class we would target it just like we would in C.S.S. by typing dot square. So this right here will basically point to every item in the dom that has the class of square applied to it, and then we can do with that whatever we want to So let's say we wanted to animate it we would type dot, animate we're using the jQuery animate method. So then we're going to type our opening and closing parentheses, and then inside the print to seize we need an object with a list of properties and it. And so the way we create an object is we simply type a pair of curly brackets, and then I'm going to hit enter to move the closing curly bracket, and closing parenthesis down. And then after that closing parenthesis will put a semi-colon at the end of that statement, and then inside those curly brackets again we're going to type in the properties that we want to animate. So let's say for example we wanted to animate the width of our square we would type in the property we want to animate a colon, space, and then we would type in the value we want to animate to. If we want to animate it to 150 pixels, right now it's at one hundred pixels, let's actually make it wider, let's go up to 500 pixels. We're gonna put that inside quotation marks. We'll type 500 PX inside quotation marks and we see that animate now there is a default duration for that animation, but if it's too slow or too fast then we can come down here after the closing curly bracket, but before that closing parenthesis, and all type comma space and then the duration of the animation and this duration is going to be in milliseconds. So if we want that animation to take up five seconds we would type 5000 for 5000 milliseconds. And then we can see over the course of five seconds our Square is animating. If we want to happen much quicker, maybe over the course of half a second, we could set it to 500 milliseconds, and we can see that it happens much quicker that way. Now, if we wanted to ease the animation, we only really have two possible options built into jQuery for easing, we either have a swing or linear. Now if want to refresh this and you can refresh your display down here by hitting command Shift+5 or Ctrl+Shift+5 if you're using a PC, and it will refresh that. And by default, we have what's called the swing easing method, and the swing method basically starts off slow, moves faster throughout the middle of the animation, and then slows down again at the end. So again that's the default. If we wanted it to animate at a constant rate of speed the whole time, we would change it to linear, and we do that after we specify the duration. So after 500, we can type, comma, space, and then inside quotation marks here, we can type linear, and then once it refreshes, we can see it moving at a constant rate. Now, we can see that better if we bring it up to one full second, and we see that it's moving at a constant rate the whole time. If we were to switch that to swing then we can see that it kind of slows down at the end of the animation a little bit. Now again there are other easing equations available if you use other plugins such as J query UI. So if we were to switch this for example to a value of ease In with a capital I out with a capital o Q U I in T. This basically would do the same thing as swing, it would just be more exaggerated. So it would start off really slow speed up quite a bit through the middle and slow down quite a bit at the end. Now you can see that nothing happens because this ease in out quint is not available by default with jQuery, but if we go to our settings, and add jQuery UI, save and close, then you'll see that we can create that animation, that ease in Our Quint easing method now works. Now we have other methods available to us as well using jQuery UI. For example we have easeOut with a capital O, and then elastic with a capital E and we can see what happens there, so it kind of rubberbands back and forth into place. We also have, excuse me, ease out the bounce, which gives us kind of a bouncing animation. So, there are a few different easing options available, if you include the jQuery UI framework in addition to jQuery. Now, when it comes to actual properties that you can animate, you can animate things like width and height. You can animate the border width. You can animate margins and padding. You can animate even the max height or max width min height min width top bottom left right positioning things like that, so if we wanted multiple properties in here, let's say we wanted to animate the width and the top value in order to move it down we could do width five hundred pixels comma. And then we'll jump down to the next line and type, top: and then let's say we wanna move it down 50px. And so when it refreshes, we see that it doesn't actually work and the reason for that is if we're animating the top property, think about it as if it were a CSS property. So if we were to jump into our square class here and type, top: 50px, you'll see that nothing happens that only works if we have the position property of our square set to relative when we do that suddenly the top property works. So if we were to take this off and the top property would be set back to zero when this refreshes this animation should start to work, so we didn't see it automatically refresh. Let's click on save and then I'm going to hit command shift five to refresh everything and there we go. So as it was, as the with was animating outwards the top position was animating as well. So you can stack positions like this or you can stack properties like this and achieve the animation you're going for that way. So again you can do top left bottom right, you can do margins, padding ect. Just keep in mind that on the properties you do want to animate that have two words that might work as for example C.S.S. properties. You might have something like a line hyphen height or border hyphen with in jQuery, it wouldn't look like that and jQuery it would be all one word and instead of a Dash. It would just be border and then Width with a capital W, so you can experiment with the different properties there, but those are the basics of animating using the jQuery animate method. So thank you for watching and now that we've refreshed our memories on how to animate with CSS and jQuery, we can move on and start creating some really nice practical web animations.

Back to the top