 Ok, today we're going to be looking at animations with JavaScript and tween.js. If you enjoy my tutorials and would like to see more, please think about contributing to my Patreon account at patreon.com forward slash metal x1000. And here we have some very, very basic HTML, HTML tags, header tags, body, and inside a div tag that has an ID of target and we're going to give it some CSS styling just so it has a look to it with the words filmsbychris.com in it, which is a great website if you've never been there, I recommend it. And this is what it looks like when it's displayed. It's a box 200 pixels wide, 200 pixels high with the blue background and the words inside it with a little bit of padding. That's it. Very, very basic. Now, you might at this point, if you've been watching this in a series, you might be going, why is this inside the HTML5 3D series? And we're not going to be getting into 3D stuff today, but tween will be used in future tutorials within the 3D worlds we create. So I just wanted to show you it in a 2D example just to keep things simple. So at this point, let's go back to our code and that's actually the code from last tutorial. We can close that. There we go. This is what we're working on right now. We're going to save this and we're going to now import the tween.js code script. So I've already downloaded it. You can get it at either github, just search tween.js, we'll give you the code. And then the official site for it is createjs.com and they have some other packages that they create as well, but you'll see the link for tween.js right there that you can download. You can also follow the links in the descriptions to all the examples in this series, all the scripts I write and I'll have a link to the minimal tween.js code right there. So it's in the current folder, so all I have to do is say script, source and tell it where it is. Again, since it's in the current folder, all I have to do is give it the name of the script. If it's elsewhere, of course, you'll have to tell your code that, okay. So we've imported that. And now let's start writing out our portion of the script. So I'll say script, give it a script tag, we'll give it a closing script tag here. And we're going to create some functions. We're going to create an initial function in it. So we'll call that even though we're about to create it and an animate function. Now theoretically, if you watch this series, I kind of go back and forth. The animate function can be called within the initial function, either way, as long as it's called at some point. So let's create our initial function here. I'm going to say function and init. And I'll open and close the braces for that. And I'm going to create a variable. I'm going to say target. And we're going to look at the document, which is our HTML page. So when you see within JavaScript, it says document. Meaning this entire page, look at this entire page that we are creating right now. Look for and get an element. And this is case sensitive, so capital E there by ID, capital B, capital I. Okay, so what element are we going to look at? What do we want to be our target that we're looking for? Well, we created an element up here, a div tag. And we gave it an ID of target. You can give it an ID of anything. Just remember that when you call it down here, you're going to want to call it the same way. So we'll say target. And that will incorporate, since that's a div tag with stuff enclosed in it, everything inside that div tag as well. Now, we start working with tweens. Let's create a variable. We'll say, we'll call it tween. And we're going to say this tween object is a new and capital tween dot tween. By the way, tween is short for between. And basically, if you're creating animation, you can have a beginning point and an ending point. Well, tween will generate the points in between for you. Because if you tell an object, such as our little box right here, a little div tag, go 200 pixels to the right, it's just going to go boop and be over here. You're not going to see the animation. So you can write out code that says, OK, take this box, take its position, add one pixel to it, and loop that until you hit 200, which isn't that hard to do. But tween takes care of that and allows you to do a lot of other, as you'll see momentarily, smoother movements with that. Basically, it does the math for you. I want to make it clear that tween does not do any animating itself. All it does is generate numbers. And it will give you a curve of sight, depending on what type of curve you want to create. And it will generate the numbers for that. And then you take that and put it into anything that takes a number. And mostly, if you're doing animations, that's going to be the position. Either it's top left, so it's movement left and right, or it's top and from top to bottom. Well, no, top to bottom would be size. So it's position, top left, or its size, width and height, or its rotation. So anything that can take a number value, you can take tween, generate numbers, and put it in there. I want to make that clear that tween is not doing the animations for you. It's generating numbers for you. And hopefully, I'll show you better than I just explained it. So right now, I'm going to create some variables, x, y, and we'll have one that I'll call rotation. And I've given them values. We'll say x is 50. And let's just say, let's just start at 0. We'll say 0, 0, and 0 for all of those. Because our box is, we didn't give it a left and right, so it's defaulting to the top of our screen. So we're creating this new tween object. Now we're going to give it some parameters. And I'm just going to go to the new line just to keep it clean. I'm going to say 2. So this is it starting. So that's where our cube currently should be. It isn't rotated at all, and it hasn't been moved left or down. If it was, we'd want to set those to that. And we can also grab those from its current position. That's more than this tutorial is going to be getting into. So we're going to say tween, where do we want these numbers to go to? We'll say x, let's move x 400. So we're starting at 0 all the way to the left. And we're going to move 400 pixels to the right. In this case, we're saying 400, not necessarily 400 pixels. We tell that to our, with our JavaScript later on. And then we're going to say, OK, y is 0. Again, y is just a variable. And let's move that 50. Actually, let's leave that at 0 for right now, I think. Well, we'll play with that again momentarily. And then we're going to say rotation. Let's rotate it. In this case, we'll do degrees, 90 degrees, 200, or 2,000. I'll explain that in a moment that's timing. Then we'll say, on update, we're going to say function. OK, so it's going to be generating all these numbers from x, 0 to 400, but it's not going to go straight to 400. It's going to have a type of animation curve to it. Again, we'll explain that more in a minute. I'm just going to use the default for right now, which I believe is bounce out. So ease bounce out, you'll see what I'm talking about as we get further into this tutorial. Make sure I get that there. OK, this is where we take those numbers and actually put it to our target, our div tag. I'm going to say target. So that's what we created up here, which is our documents element with an ID of target, which is our div tag, that right there. So I say target, I'm talking about that. Then I'm going to say style, which is its CSS style. And we're going to set its top location. Actually, now let's just go left for right now, and then we'll add in top, since we didn't give a value for the top anyway. At this point, it goes from 0 to 0. We're going to change all that so you can see the differences. So this we're talking about because we're calling that within this function, within this tween object. You could call it separately, in which case you would point it to tween. But since we're within this, we're creating it and we're still telling it what this is. We can say this, this tween object. OK, so the left of our target is going to equal what x is. We also need to tell it x what, because when you're talking about left and right and size with CSS, you can also give percentage. We don't want percentage, we want pixels. So we're saying every time this updates, every time this tween object creates a new number, well, take this target style left and take the x value, which is going to be somewhere between 0 and 400. Actually, it could be a little bit less than that because of the animation, but you'll see momentarily. And move it that many pixels. I hope I'm not confusing you by talking about too much. In fact, we're going to go straight to that without any other, we're not going to mess with the rotation just yet because I just want to show you what we're creating here. And then we want to say here, start, at this point, everything's raised, so we'll say start. We're going to say function. I think I'm spending too much time explaining this and not enough time just doing it. Sorry if I'm boring you with this. Do two things. We're going to request animation frame, animate, and then we're going to say tween.update. So very, very simply, this is just saying, continue to animate. And each time we do animate this function here, we're going to tell tween to update. So on update. So this is going to continuously loop. Let's save that. Let's go in here. I can close this console, hit a five, and you can see our box moved. So very simply, you're like, oh, that was not very impressive. I could have done that without tween.js. Well, let's add in another part of tween.js that makes tween.js so cool. We will go here. So up here, when we create our tween object, we told it where we want it to start, where we want it to end, how fast we want it to go, and then what we want to do with those numbers. Let's add in another feature, which is the dot easing. And here, we're going to say, OK, use the tween JavaScript that we imported and use its easing function. And now we have lots of different options when it comes to this. Let's go back to our web browser here. And here's a website from the examples on tween.js that show a bunch of different curves. So we can have a linear, which is what we've got right now, quadratic in, quadratic out. So you can see how the animation is going to move. Do you want it to start off slow and then speed up? Do you want it to be smooth at both ends? So let's pick one of these. That's something very simple. We'll just pick this cubic in and out. Go back to our code here. And that's what I'm going to paste right there. Save that. Go back to our web browser here. Hit F5. And you see, instead of being a constant speed, it's starting off slow, speeding up and easing in at the end. So it eases in and up. So that's one option. Let's go to another one here. Some of these more fun ones. Let's do bounce out. So you can also have a bounce in and out. Let's just do bounce out. So basically they've done all the math for you to get these curves created. So we put that in there. We'll hit F5. Boom, boom, boom. So if you wanted to act like that was hitting a wall or something. And of course, we're doing this on the page load. You can also do it when things are clicked. Click, then make it go boom, boom, boom. So that's another example right there. Let's go back in. So far, all we've done is animated the left to right. So let's just, real quick, copy this line and paste it here. And instead of left, let's do top. And I'm going to leave this as X right now to show you that it doesn't matter. X doesn't necessarily represent left and right. And Y is up and down. I mean, that's how you should think of it. But whatever we pass it here, it doesn't matter whether we say top here or left here. So did I save that? It did. OK. So now, boom, boom, boom. So if you wanted to go out of diagonal. So now, that's just using the X number. Let's go back in and change this to Y. Now, Y is going from 0 to 0. So we should not get any up and down movement, as you can see. Let's go back in here and change Y to 50. So you see it went down a little bit. Let's, really quick, let's just comment this out and add in something else. Two lines. And actually, you might need more. We're going to rotate. And different browsers handle rotation differently. I have notes on this somewhere. Here, I'm going to put in, well, let me just use this example. I'll say my target.style.mozilla transform equals. And then quote here, we're going to say rotate. And we're going to say in here, plus, we'll do some math. Floor this dot rotation plus degrees. OK. So what are we doing here? OK. So, moz transform, you can guess. Moz means for short from Mozilla. This is how Mozilla Firefox, or in this case, I'm using Ice Weasel, which is the same thing, will rotate an object. The floor math will make sure it rotates where we want it to rotate. But this and then degrees means number of degrees. This rotation, of course, we're going back to this object, which is our tween object that we're creating right now. And whatever the rotation value is, which is going to start at zero and go to 90. Now, if I typed everything properly and hit F5, it rotated 90 degrees and bounced, again, using the bounce. Now, of course, you can create a separate tween function that would use a different easing for the rotation if you wanted. But there we go. We have that. And of course, that's for Mozilla. I'm going to just say YIP to copy that. Instead of Mozilla, I can say WebKit. And that will work with WebKit browsers. And there's another one for Internet Explorer, I believe. I have notes on this somewhere. But that's just what I have ready for you today. But to make sure it's compatible with the majority of browsers, you're going to have to add in those extra lines. You always put them in a function and call them separately. That way you have one command you can call. And that's the great thing about programming is it's for taking tasks that you would do over and over again and simplifying it. So let's uncomment our line here. We'll go back to our browser, hit F5. So now it not only moved 400 to the right, it moved down 50 as it was going because you can see it's at the top and it moved down. And it rotated with the bounce out curve. Let's go back here for a second. And I'm going to show you, let's put this up to 10,000. Save it and run it again a little bit slower. Because we want what we're saying there is the full animation should take 10 seconds. So again, it does the math for you. So theoretically, you could write this all out yourself, of course. It's just a JavaScript. But this library makes it easier for doing these different animations. I mean, again, any of these right here, as far as the animation, timing, you just put the number in. And again, it's not doing the animation. It's just creating the numbers for you. So you can equate these things to not only size and rotation, or sorry, position and rotation, but size as well. And since it's not manipulating the div tag itself, it's just outputting numbers. You can use it for, again, anything that has numbers, which brings us back to our original topic of 3D animation. Because we can take these same things and say, well, take the position of this cube we created and move it this much. Rotate it on the x, y, or z, because we're working in 3D there, the size of it. So tween is very useful in 3D stuff as well as 2D stuff, as you'll see in future tutorials, hopefully. And again, check out the links in the description. Filmsbychrist.com, that's Chris with the K. There should be a link there also to all the code from today's tutorial as well as the rest of the series. And as always, I hope that you have a great day. And it works as a HID device. For those of you who don't know, a HID device is that H-I-D. It stands for Human Interface Device, basically a plug system, and the computer text says a keyboard. So if your computer can accept a keyboard, this should work on it. So if you've been following this series since the beginning, originally this was going to be a weekly topic every Friday. I may have noticed that there hasn't been a video for the last, I think, two Fridays. I'm on a new schedule that isn't exactly set yet. But it's going to be what videos I make are going to be decided in part by my Patreon viewers. So I plan on continuing this series, but how quickly and when it happens, all depends on what my supporters want to see. So if you head over onto patreon.com forward slash metalx1000, there should be a link in the description, you can come one of my supporters, and you can be one of my patrons, and you will have a little more input and say on what videos are made. So I thank you for watching this. There will be more on this topic, but when and where it depends on what my supporters want to see. Thank you for watching. And again, I hope that you have a great day.