Hey, what's up? Let's talk about motion for the web. The definition of the word motion is an objects change of position over time. That's it. You have an object here at point A and it's going to go to point B. It is not going to teleport there. Typically, it's going to follow a certain trajectory with a certain speed and change of pace, and this is what creates motion.

with a certain speed and change of pace, and this is what creates motion. So think of something like opening a door. In real life, you're going to press the handle and push or pull, and the door is going to pivot on the hinges. It's not just going to teleport to the end position. If it did open instantly like this, it might leave you confused and puzzled as to what happened. And so bringing motion to web application is trying to bring this sort of continuity in someone's brain

And so bringing motion to web application is trying to bring this sort of continuity in someone's brain of something that happened, started in a state and ended up in a different state. If done right motion can bring a better user experience to your applications and websites if done right, I said. And the rule here is quite often, less is more. Less is more is the same rule that applies to say, box shadows. You can't really see it, so you crank it up

to say, box shadows. You can't really see it, so you crank it up and crank it up until you really see it. But that's typically not the right way to do a box shadow. Great looking box shadows are very subtle to the point where you barely notice them at first sight, but they do bring this depth and hierarchy to the elevation of the page without really being in your face. And the same goes with motion and animation.

of the page without really being in your face. And the same goes with motion and animation. I think you'd never want an animation to be in your face and like begging for your attention. Instead, you want emotion to be subtle and barely noticeable. Some users might not even notice that things have moved, but because they have subtly moved, they brought a really fluid and seamless experience that makes your application come to life and feel real and polished.

and seamless experience that makes your application come to life and feel real and polished. So in this course, we're going to take a look at the various ways you can go about bringing motion and animation to your websites and applications. We will start with CSS only animation and then progress to JavaScript animation for slightly more advanced stuff. But before we do that, I wanna make one very important note.

But before we do that, I wanna make one very important note.