Let's start by looking at the most basic way that we can animate a dumb element over time with JavaScript. We've got our now very familiar square example, but this time we're going to write JavaScript instead of CSS to animate it. Here's the page template, and you'll notice that this time we are giving it a script of JS animations, ts yes type script. I know, but this is going

of JS animations, ts yes type script. I know, but this is going to just give us some nice auto complete suggestions when we explore what we can do. And just to show you that this file is wired up properly, let's alert. Hello. And so now when I refresh the page, we should see the hello alert and we do, okay, great. So, uh, square has a class of square and so why don't we assign this

So, uh, square has a class of square and so why don't we assign this to a cons square equals documents that query selector square and ignore that little bit of type script. We're just telling it that we know this is not going to be null. So like I said in the intro, when we animate with JavaScript, we are still technically using CSS or using stars, but we just use JavaScript

with JavaScript, we are still technically using CSS or using stars, but we just use JavaScript to change the styles. Let me show you what I mean. So I can go square that style to reach into the style attributes and then that transform. And so we're going to change the transform CSS property on the square to rotate 45 deck. And so I'm sure that you can all visualize what's going to happen when we take a look at the browser. And as you probably guessed, the square has been rotated

to happen when we take a look at the browser. And as you probably guessed, the square has been rotated by 45 degrees because, well, the transform property has been applied. And if I inspect the elements here, you will see that this has been done in an inline style here. Style, transform, rotate 45 degrees. And so with this elements that style in JavaScript, you can essentially transform any CSS property that we want. Now the challenge is to work out

you can essentially transform any CSS property that we want. Now the challenge is to work out how we can gradually change, uh, this CSS property, the transform property in our case, instead of just setting it to 45 degrees, how do we go from zero to 45 gradually over time? So I'm sure you are all familiar with set timeout in JavaScript, which lets you have a function and then delay that function execution

which lets you have a function and then delay that function execution by a duration like 1000 milliseconds. So if I was to place the change of rotation to a square inside the set timeout, now when I refresh the page, the square is going to start in its normal position and after one second or a thousand milliseconds, it's going to be rotated. And so while set timeout only runs once, there is another function called set interval,

And so while set timeout only runs once, there is another function called set interval, which is going to run over and over. And so that gives us a way to progressively change this rotation angle. So why don't we have a let rotation equals zero, which is a rotation angle. And then instead of hard coding the 45 degree value here we are going to say rotation equals rotation plus five.

are going to say rotation equals rotation plus five. So we add five degrees to the rotation and here we can transform this to a template string so that we can dynamically pass the rotation value. All right, so now every second, the rotation angle should increase by five and the styles should be updated. Let's go take a look. Alright. And it seems to be working every second.

Let's go take a look. Alright. And it seems to be working every second. The square is rotated by five degrees. Uh, and this is the starting, uh, of a animation if you want. Of course this is way too slow. It's only animating every second. But let's imagine we wanted a 60 frame per second animation or try to get as close to as we can. Well, instead of 1000 milliseconds,

or try to get as close to as we can. Well, instead of 1000 milliseconds, because this is one second, we sort of want to divide it by 60. So we have 60 iterations per second, and that's sort of equivalent to 16.6 6 6, 6 6, I think. Let's check it out, 1000 divided by 60. And yeah, that's the value. So this is going to rotate much faster. So maybe let's change the rotation to only increment

So this is going to rotate much faster. So maybe let's change the rotation to only increment by one degree and we can use the shorthand rotation plus plus for that. Aha. Well we have an animation now, uh, it's linear and it's pretty basic, but it's animating enough times per second that it feels really fluid and what the expect from an animation. Now let's say we wanted to stop that animation when it reaches 45 degrees.

Now let's say we wanted to stop that animation when it reaches 45 degrees. So cons max rotation equals 45. Now when you use set interval, it's going to allocate some memory and it's going to return you a number id. So we can grab that cons interval ID and we will let, uh, copilot fix the spelling. Thank you. And so now this ID allows me to do the opposite of set interval, which is clear interval when you want

Thank you. And so now this ID allows me to do the opposite of set interval, which is clear interval when you want to stop this function from running and using memory. So we could keep our logic here and then here go if the rotation exceeds or matches the max rotation. Let's clear interval and pass the ID that we got from the set interval here. So we set an interval where we increase the rotation, but when the rotation has matched the max rotation, we clear

So we set an interval where we increase the rotation, but when the rotation has matched the max rotation, we clear that interval, which should stop the rotation from happening. And so the fact that the square is now stopped at 45 degree rotation angle tells me that it's working already. So let's refresh the page and, uh, it's happening a bit too quickly, so let's maybe slow it down by dividing by 10 only. And I'm going to refresh the page once again.

so let's maybe slow it down by dividing by 10 only. And I'm going to refresh the page once again. So this time you can see the rotation starting and eventually it stops after reaching 45 degree, which is our max rotation. So that's a very basic but also naive way to animate with JavaScript. There are performance issues with this. And in the next lesson I'll show you how you can improve this with another JavaScript function.

And in the next lesson I'll show you how you can improve this with another JavaScript function.