From the course: Vanilla JavaScript: Animations

Unlock the full course today

Join today to access over 22,600 courses taught by industry experts or purchase this course individually.

Apply easing to the animation

Apply easing to the animation - JavaScript Tutorial

From the course: Vanilla JavaScript: Animations

Start my 1-month free trial

Apply easing to the animation

“

- [Instructor] At the moment, the key frames do establish timing based upon how many are present, but each property animates in a very linear way from one to the next. Since we're using the web animations API, we can also make use of a variety of complex ease types. So, one way to use eases is within the keyframes themselves as a property of each keyframe. Let's go ahead and add some easing to the end of the first and second keyframe. This is just like how we set these other properties, we just have a comma between each property, and we give it the property name and a value, so, we're gonna start with an ease-out on our initial keyframe. The middle keyframe is going to have no ease whatsoever, and then for our final keyframe, let's change that to an ease-in. All right, go ahead and save that, and then look to the browser. All right, we can see that there's definitely some easing going on here. It winds up, slows down a little bit, and then speeds up once again. Back over in our…

Contents