1.2 Understanding Easing

[MUSIC] So, what is easing, then? Well, easing is the name commonly used to describe the timing function of a CSS transition or animation which we set by the transition timing function or animation timing function properties. It's used to control the acceleration of the effect. An effect could start very slowly, and then speed up or it could start rapidly, slow down slightly, and then speed up again. In essence, this timing function is a mathematical expression, which draws a line on the graph of the transition amount over the course of time. This is quite abstract too, imagine in your head so let's take a look at an example. The simplest, although least exciting graph is a straight line that runs diagonally from zero time and zero amount of change to 100% of the duration and 100% of the amount of change. At any point in this graph, we can draw a tangent, which is a straight line which only touches a single point on the curve. The slope of this tangent gives us the gradient of the curve and it's the gradient which determines the acceleration of the effect at any given moment in time. With a straight line graph, the gradient is constant at every point in time so the effect will start, continue, and finish at the same speed throughout. Another way to put it, is that for every unit of time that passes, an equal amount of change occurs. Things get a little bit more interesting with a curved graph. Here's a diagram of an S shaped curve. The initial shallow gradient means that the effect will start very gently. For a large increase in time the amount of change is very, very small. Halfway through the effect the gradient is very steep so a small change in time has a large impact in the change of whatever property we happen to be transitioning or animating. At the end of the curve, things tail off again and the affect comes to a gentle stop. The end result of using these two different timing functions is very different. I've got two elements here to demonstrate the point. One is a red box, one is a blue box. The red one has been given a straight-line easing curve, and the blue one has an S-shaped easing curve. If we animate the left position of each of the elements over the same duration of, let's say four seconds, we'll be able to see a significant difference between the way the affects play out. So how can we use this in CSS? Well,when using easing, we have a handful of keyword values for a set of common predetermined acceleration codes like the two that we've just discussed. The available keywords are linear, which is the straight line graph we've just looked at, ease, ease in, ease out or ease-in-out which is the s-shaped graph. There's also values for creating step animations which might be useful for doing things like stop motion or claymation type things, but those step animations aren't the focus for this video. Let's take each of these keywords in turn and demonstrate how they behave with a series of examples. In each example, we'll animate the left position of a box and see how it accelerate and decelerates as it moves from one side of its container to the other. So let's set things up here. I've just created a set of key frames to animate the left position of a box from the left side of its container to the right. Having done that, I"ll apply these key frames to the element and set the animation name, the animation duration of four seconds. We'll have it loop infinitely and alternate backwards and forwards. We'll start off with an animation timing function called ease, which is the default value. This ease key word produces a graph as I've got pictured here, with a slight curve at the very start and a slightly larger curve at the end of the line. The acceleration is, therefore, quite gentle to start with, but then it quickly speeds up before slowing down again gradually. This is the default acceleration for both transitions or animations, so this will apply even if we don't set a value for transition timing function or for animation timing function. The ease-in keyword will produce a very gentle acceleration to begin with, up to a steady speed. There won't be any easing off at all at the end of the effect. The ease-out keyword works very similarly to ease-in, but in reverse, so the animation will start at a fairly constant speed and then slow down to a gentle stop as the effect draws to an end. I rarely find myself using ease in or ease out as the start or end of the effect can sometimes feel a bit sudden and not as natural as it might be. I tend to leave the default behavior of ease or use ease-in-out, but there is a further option available which will allow us to create a custom easing curve. But before we look at that, we need to discuss the theory behind these curves in a bit more detail. Each of the keyword values that we've just discussed are convenient names for a much more powerful method of setting the easing. To understand how that works, we need to learn about Cubic Bezier Functions. Now, Cubic Bezier Functions are a mathematical expression that produces these curved graphs and each of the keywords can also be defined by its cubic Bezier function. These functions are named after Pierre Bezier, who was a French engineer who patented and popularized these Bezier curves and Bezier surfaces that are now used in most computer design or computer graphics packages like Adobe Photoshop, Adobe Illustrator, or Sketch. They were developed back in the 60's while Bezier was designing automobile bodies for the French car manufacturer, Renault. But instead of diving into a history lesson, let's bring it back to CSS. We use these functions as follows. First, by calling the cubic Bezier function and passing in a series of four parameters. To understand how these work and what the values map to, it's useful to visualize the graph of a mount of change over time again. When considering this, the duration and the value that's being changed aren't really important. We can talk generically and think of the x axis as ranging from zero to 100% of the duration of the effect and the y axis as ranging from zero to 100% of the amount of change to the values of the various properties that are being transitioned or animated. We can refer to the four corners of this graph as p0, p1,p2, and p3, where p is just short for point. Point zero is at the start of the effect, and point three is at the end. Now for this function to be valid, these values must be in the range of zero to one where we can think of zero as being equivalent to 0% and one being equivalent to 100%. P1 and P2 are also numeric values, and they determine the amount of curvature of the curve. They determine the gradient at either end of the graph. These values are defined as coordinates, which are then fed into the cubic-bezier function. So the linear keyword can be defined with the cubic-bezier function,zero, zero, one, one. The ease in-out keyword for the s-shaped graph can be defined by the cubic bezier curve 0.42, 0 and 0.58, 1. Mapping these keywords to their respective Bézier function is all well and good, but is it useful at all? Well, yes it is, because in addition to all the keywords that we've mentioned already, we can actually set easing with this cubic-bezier function in our CSS as well. We've been using an interactive tool at cubic-bezier.com to illustrate some of these concepts but sometimes, if you're working in a real project, you might want to experiment a bit closer to home and by that, I mean, working directly in the browser of the project that you're working on. Fortunately, the smart folks at the Chrome DevTools team have integrated tool directly into the DevTools that you're likely already quite familiar with. When working with transitions or animations, you can access the easing tool curve within the styles tab of the crev dev-tools. As long as you've set a value for the time and function rather than just letting it inherit it to the initial value of ease, you should be able to see a purple icon next to the timing function value. Clicking on this is gonna pop up the easing tool where you can then experiment live with the acceleration of your particular effect. As you click through the arrows to the left or right, each new selection will automatically update the cubic bezier functions that are being used and also give you a quick demo of how the timing function might behave. Not only that, but you can drag the purple handles around to create your own curve and even drag the handles outside of the zero to one range and this will create a bouncing effect if the curve dips below the p0 line or above the p3 line. Adding a bounce to an animation or just controlling it's speed in general can greatly affect the personality and the feel of the motion and, when used tastefully, can create some really beautiful and engaging effects. Having this tool right at your fingertips within the dev- tools is really really handy, and I've used it many times to just tweak an animation's life within the context of a specific project I'm working on. I'd highly recommend having a play around with it yourself. So we've taken a pretty deep dive into easing and cubic bezier functions today. I've tried to keep the math stuff to a minimum, because quite frankly, it makes my head hurt but hopefully, digging in a bit of the theory behind the easing key words has helped to show you just how powerful these easing functions can be and maybe you can start to see how this might apply to you of you future project. Thanks for watching. Cheers.