Hello, in this JavaScript video I am going to show you animation. First of all, let's show you some manual animation. And before we can do that let's create to create a gear. BMT will have an ID set ID to red box. What is installing install you can even have this in a separate file but for what we need at this price and we're going to hash red box and we're going to get to the Reeboks in the background. Dash color will be red with a height of 100 pixels out of nowhere now if we reload we should get a red box.
We are a box There we go. So let's manually sort of animate that, we would have put these is the script here to first of all, we need to get hold of it. So we can do var. So red box equals, so this is a variable that's going to store the know the elements that we'll be getting by the ID. So it could be called wherever you want to document dot get. element by ID, and you know what the ID is.
And you don't even need to put a hospitalist ID it knows that it's the ID. Now, we could do this in red box, dots dial, and we could set the position for 10 position to a relative for example, or let's do the.net equals Just to see what that does. It's moaning methionine. And it will be, we will need it afterwards. So feel free here. Not remove the content from inside.
Yeah. Okay. All right. We also need to have a relative position. So let's test the position relative. So as you see, we moved it manually, okay.
All right, but don't really want that to work. Actually, we're going to do the next time you create a button when you click it, it literally just moves this cross. And obviously, this moves it absolutely and not relative to It's current position. So you need to have a variable that keeps track of this as well. Or you can just get the value from it style, you know, dot dot dot left and retrieve the value then just add something to maybe 20 pixels. Okay, so what we can do is automated animation, and let's cover all of that good stuff.
So we'll call this out we'll still need this. And I'm gonna say, another function saying, epic movement. And in here, in a pig movement, we will copy this and it's gonna equal to, it will equal it will equal itself. Let's say Five ad pixel also knows the unit. And what we're going to do is actually animate it. So this is really cool.
So we are going to say, we're going to animate it. So we're going to set a timer. And after the timeout has elapsed, we'll call this function. So we'll say every week now, I will call the after 100 milliseconds, say for reload that that does not seem to be Oh, it's not moving because I haven't initially called the epic movement. But our next test we're going to do is create a button that actually click when you click it causes. I'll manually just kill it here.
Hans Newman got the set title recording itself which in the coma What about Italy not like try something else I want an email Wherever. And I set this to animation. It should just be milliseconds. So well, let's have a look. Do a console dot log. Is this even been called multiple times?
It's been called multiple times, the problem will be somewhere here. So we'll do the startup left equals we need to pass it over again. Otherwise, it's going to you know, the pixels are not going to mean nothing. So let me reduce this to one pixel them. Can you still Not working style dot left. We are 10 pixel and it is relative to a console dot log.
I'll get rid of this warning the sudden we know it's going in here. Get left so we'll see if it's actually not being incremented successfully seems Oh okay, so we're passing in the Redbox dot style The only thing I can think of in this, I put this Let's try this put this at the top equals and also the objects always created above it and we'll just a song here that's not doing anything Redbox the store dot left yeah seen this piece of code here all right what if what if this man literally put this like that whiteboard can literally just like that as well so it doesn't like pausing in the red box style dot left We'll go down a different route we'll say movement equals zero. And we'll change this to say add new equals one. Movement command, save that reload. Boom, there we go dollar dollar bill coming our way up to five.
And obviously you can change this to change to 101 sleeve the same man but he just won't be as smooth. So, this movie you want the you want this to be smaller muscles one millisecond, but let's decrease this point zero. This will be very smooth. Who's going to just give me a one? Yeah, that's looking very good. So that is any meishan built in.
If you want some more complex stuff, recommend jQuery. We sold a few problems together. That's it. Thanks for watching. I look forward to seeing you in the next awesome video.