Custom Timing Functions with cubic-bezier()

The timing functions we covered in the previous section get a whole lot 0:00 more exciting once you add CSS transforms and custom timing functions into the mix. 0:03 So now you're gonna learn how to create more complex timing functions using 0:08 the cubic-bezier function. 0:12 With cubic-bezier you can create all kinds of fun and interesting easing effects. 0:14 In the previous section you learned that each of the pre-defined 0:19 timing function key words is a shorthand for 0:22 a more complex timing function created by what's called a cubic-bezier curve. 0:25 If you read the descriptions for each key word you'll notice that 0:31 each description shows you that the key word is equivalent to a specific 0:34 cubic-bezier function containing all these funky number values. 0:39 So before we get into how cubic-bezier works, or 0:44 what these numbers even mean, let's take a look at some examples first. 0:48 I created a demo that shows you the types of easing effect you can create 0:52 with cubic-bezier. 0:57 Now, the top example uses the ease timing function the browser applies by default, 0:58 so the transition starts and stops gradually. 1:05 But with cubic-bezier you can change the speed dramatically. 1:09 For example, you can make a transition start slow. 1:13 Then quickly accelerate to its end position like in this example or 1:16 you can make a transition start fast then slow down in the middle, and 1:21 finally accelerate to the end like this. 1:25 Now this next 2 are some of my favorite easing effects. 1:28 So, here the transition begins at a constant speed. 1:32 Then it sort of overshoots the end position before stopping. 1:36 So it eases out and back in, making the motion appear more realistic. 1:40 And the last one is similar, but it uses anticipation in it's movement. 1:46 It pulls back at first, then eases out and back in. 1:52 So all these neat easing effects were created using the cubic-bezier 1:58 functions you see displayed above each example. 2:03 These functions define a timing curve called a bezie- curve that accelerates and 2:07 decelerates transition speeds. 2:13 If you've used the vector program like Illustrator or 2:15 Sketch, then you're probably familiar with bezier-curves. 2:18 You add a start and end point to create a straight line. 2:22 Then you can define exactly how the line curves by adjusting two control points. 2:25 In the cubic-bezier CSS function, the bezier-curve is defined by four values, 2:31 these values create the start and end point and 2:36 the control points of the acceleration curve. 2:40 Don't worry. 2:43 You're not expected to come up with bezier-curve values off 2:43 the top of your head. 2:46 That involves a lot of trial and error to get the easing effect you want. 2:47 Fortunately for us, there are lots of great tools 2:51 to help you experiment with bezier-curves and produce awesome easing effects. 2:54 For example, cubicbezier.com developed by CSS expert Lea Verou is a simple app for 2:59 creating, testing, and comparing easing functions with bezier-curves. 3:06 Visually, it looks similar to the bezier-curves you 3:10 would draw in Illustrator or Sketch. 3:13 So now I can click and drag these control points to start creating my 3:15 custom timing functions, So as soon as I move one of the control points, 3:20 the cubic-bezier values up top start to change. 3:25 These are the values I'm going to use in my CSS, 3:30 once I'm happy with the easing function I've created. 3:33 In a bezier-curve, the steeper the curve, the faster the animation will be. 3:36 So, for example, if I click Go, 3:42 you can see how the top animation moves much faster than the one below it. 3:45 Now the flatter the curve the slower it will be. 3:51 So if I flatten the curve and 3:54 click Go you can see the top transition moving a lot slower. 3:57 So the neat thing about this tool is that when you click Go, 4:05 you can preview the easing effect, and even compare yours to one of 4:09 the predefined timing functions, like linear, ease, and ease-in 4:14 I wanna create a more dramatic timing function by moving the start and 4:24 end points in the curve outside the standard easing range represented 4:29 by the top and bottom edges of this graph. 4:34 So I'll slide the first point, down and below the graph, 4:38 and the next point up and above the graph. 4:43 When I preview my function, 4:50 notice how it creates that motion with anticipation effect. 4:52 It pulls back then eases out and back in. 4:56 The initial pulling back motion happens 5:00 right here where the curve goes outside the range. 5:03 Then it accelerates and goes back outside the range to create that affect where 5:07 it overshoots the stop point Right, I'm happy with this effect. 5:13 So now I can simply click the Save button here and copy these values. 5:20 Or I can copy the full cubic-bezier snippet here and 5:26 paste it into my style sheet. 5:30 So, I'm going to paste it as the transition timing function value, for 5:35 my image transition. 5:40 All right, so let's take a look. 5:45 When I hover over one of the top images, cool, the custom timing function 5:48 gives the transitions a fun bouncy effect so know they feels a little more animated. 5:53 So now it's your turn to create your own custom function using 6:01 the cubic-bezier tool and adding them to the rest of the gallery transitions. 6:05 When using CSS transitions and transforms in your project, 6:12 be sure to keep it simple, subtle and consistent. 6:15 Although transitions and transforms can add to the overall visual design 6:19 of a site, your website shouldn't depend on them. 6:22 It's easy to get carried away with these effects. 6:26 They're fun to play around with, but 6:28 keep in mind that the effects you create should always enhance your content and 6:30 not distract from the message or functionality of your site. 6:33 In other words, you shouldn't rely on transitions and 6:37 transforms in order for your design to work. 6:40