CSS animations are awesome, but there might be a point where you feel like you start to reach the limitations of what they allow you to do. When it comes to moving things around on the screen, transitioning from A to B, uh, css animations are incredibly powerful. The limitations, so to speak, are more as per how you can control these animations, when to start them. Uh, for example, we've seen that you can choose the duration and the transition easing timing function,

Uh, for example, we've seen that you can choose the duration and the transition easing timing function, but you can't really decide when to start or stop an animation beyond a little hover interaction or as we've seen a scroll position. And this is where JavaScript is really going to open doors to a whole new world of what you can do with animations based on user interaction. Think about things like responding to the mouse movements that a user might do.

Think about things like responding to the mouse movements that a user might do. So here you can see I have this example, and if I hover over one of our instructors, the cursor is going to be followed with this nice little animation. While this is not an animation, this is just a CSS properties transformation or change that responds to user interaction. And the key word here is user interaction.

or change that responds to user interaction. And the key word here is user interaction. This is really where JavaScript shines to response to events that happen in the browser. So you can do things like follow the mouse cursor, respond to a button click, uh, you can scrub animation back and forth, change the speeds. And also you have the whole scripting power of JavaScript to perform complex calculations and math and, uh, generate orchestrate sequences of animations.

to perform complex calculations and math and, uh, generate orchestrate sequences of animations. So the interesting part is typically JavaScript animation will still use CSS or change properties on the style attribute. So these are technically still using CSS for the animation, but the orchestration and the logic and the event listening activity happens at the JavaScript layer. For a more extreme example, let's visit the

at the JavaScript layer. For a more extreme example, let's visit the www awards website, which is a website that showcases amazingly cool websites, which typically make heavy use of JavaScript animations. So, um, let's take a look at some of the offerings here. Let's try this website here. 18 years of be. So we have a loading animation and, uh, whoa, straight off the bat, uh, you can see that the center

and, uh, whoa, straight off the bat, uh, you can see that the center of this little ellipse is following my cursor. So let's go. And as you can see, this is a really immersive experience. Uh, and as I keep scrolling, look at this again, based on the mask cursor position, there are images generated, uh, and some audio, uh, events happening too. And so you get the idea.

and some audio, uh, events happening too. And so you get the idea. This is a pretty long and comprehensive website. I think this shows the chapters we barely through chapter one. Let's go towards the end of the last chapter, and I wanna show you one more thing because I checked this website before recording this. Woo. Let's go to the end. And here you have this really nice interaction

Woo. Let's go to the end. And here you have this really nice interaction where you can drag to in the wheel. So as you can imagine, building something like this with just CSS is pretty much impossible to do this bureau website and likely a hundred percent of all these other websites you'll find on awards.com are using JavaScript animation libraries to perform super advanced animations.

using JavaScript animation libraries to perform super advanced animations. Like you've seen, there are great animation libraries out there like gsap, anime js or Motion. And we definitely going to take a look at these. But before we do, I wanna start with some really basic, uh, level understanding of how you go about making animations in JavaScript in a similar way to what we've looked at with CSS. So let's start from the humble beginnings

similar way to what we've looked at with CSS. So let's start from the humble beginnings and work our way up from there.