hostmonster-Host Unlimited Domains on 1 Account   coolhandle offering reliable webhosting since 2001
Unlimited Hosting Space - FREE Site Builder   Smart Website Solutions for Your Small Business=

Upgrading CSS Animation With Motion Curves

Upgrading CSS Animation With Motion Curves

There is UI animation, and then there is good UI animation. Good animation makes you go “Wow!” — it’s smooth, beautiful and, most of all, natural, not blocky, rigid or robotic. If you frequent Dribbble or UpLabs1, you’ll know what I am talking about.

Further Reading on Smashing: Link

With so many amazing designers creating such beautiful animations, any developer would naturally want to recreate them in their own projects. Now, CSS does provide some presets for transition-timing-function6, such as ease-in, ease-out and ease-in-out, which add some level of smoothness and realism, but they are very generic, aren’t they? How boring would it be if every animation on the web followed the same three timing functions?

One of the properties of transition-timing-function is cubic-bezier(n1, n2, n3, n4), in which you can pass four numbers to create your very own timing function. Towards the end of this article, you’ll know exactly what these four numbers represent — still, believe me, coming up with four numbers to capture the transition you are imagining in your head is nowhere close to being easy. But thanks to cubic-bezier8 and Ceasar9, you don’t have to. These tools bring motion curves to the web.

Motion curves are primarily used by animators (for example, in Adobe After Effects11) to create advanced, realistic animations. With cubic-bezier and Ceasar, you can simply manipulate the shape of a curve, and those four numbers (n1, n2, n3, n4) will be filled in for you, which is absolutely great! Still, to use and make the most out of motion curves, you need to understand how they work, and that’s what we’re going to do in this article. Let’s begin.

Understanding Motion Curves Link

A motion curve is nothing but a plot between any animatable property12 and time. A motion curve defines how the speed of an animation running under its influence varies over time.

Motion curve is a plot between animatable property and time.13
A motion curve is a plot between an animatable property and time. (View large version14)

Let’s take distance (translateX)15 as an example of an animatable property. (The explanation holds true for any other animatable property.)

Calculating speed at time t1 on a distance-time plot.16
Calculating speed at time t1 on the distance-time plot. (View large version17)

If you’ve had any experience with physics and basic calculus, you’ll know that deciphering speed from a distance-time graph is very simple. The first derivative of distance as a function of time, with respect to time, is speed, which means that an object following a distance-time curve would have greater speed in places where the curve is steep and lower in places where the curve is flatter. If you know how that works, great! You’re all set and can skip to the next section.

Now, I am aware that design and development is a diverse field, and not everyone has the same background. Perhaps the two paragraphs above were all jargon to you. Don’t fret. We’ll keep going and make sense of the jargon.

Consider the red box below. Let’s get a little callow here and call the red box “Boxy”; it’ll be easier to refer to it that way. All right, so Boxy is going to move from one edge of the screen to the other in a linear fashion, and we are going to analyze its motion.

One of the presets of transition-timing-function is linear. To make Boxy move, all we do is add the following class.

 .moveForward {
	transform: translateX(1000px);
}

To control the animation, we would set the transition property for Boxy as follows:

#boxy {
	width: 200px;
	height: 200px;
	background: red;
	transition-property: transform; 
	transition-duration: 1s; 
	transition-timing-function: linear; 
}

That’s a very verbose way to specify transition. In reality, you will almost always find transition written in its shorthand form:

#boxy {
	width: 200px;
	height: 200px;
	background: red;
	transition: transform 1s linear;
}

Let’s see it go.

Boxy undergoing linear motion18
Boxy undergoing linear motion (Image19) (View large version20)

Robotic, isn’t it? You could say that this motion feels robotic because it’s linear, which is a perfectly plausible answer. But could you explain why? We can see that setting linear results in robotic motion, but what exactly is happening behind the scene? That’s what we’ll figure out first; we’re going to get to the innards and understand why this motion feels robotic, blocky and not natural.

Let’s start by graphing Boxy’s motion to see if we can gain some insight. Our graph will have two axes, the first being distance, and the second time. Boxy covers a total distance of 1000 pixels (distance) in 1 second (time). Now, don’t get scared by all the math below — it’s very simple.

Here is our very simple graph, with the axes as mentioned.

Empty graph with axes21
Empty graph with axes (View large version22)

Right now, it’s empty. Let’s fill it up with some data.

To start off with, we know that at 0 seconds, when the animation has not yet started, Boxy is in its initial position (0 pixels). And after 1 second has passed, Boxy has travelled a total of 1000 pixels, landing at the opposite edge of the display.

Boxy's initial and final positions23
Boxy’s initial and final positions (View large version24)

Let’s plot this data on the graph.

Graph with Boxy's initial and final positions plotted25
Graph with Boxy’s initial and final positions plotted (View large version26)

So far so good. But two data points are not enough — we need more. The following figure shows the positions of Boxy at different points of time (all thanks to my high-speed camera).

Boxy's positions at different points of time27
Boxy’s positions at different points of time (View large version28)

Let’s add this data to our graph.

Graph with different positions plotted29
Graph with different positions plotted (View large version30)

You could, of course, have many more data points for different times (for example, 0.375 seconds, 0.6 seconds, etc.) but what we have is enough to complete our graph. By joining all of the points, we have completed the graph. High five!

Final graph31
Final graph (View large version32)

Cool, but what does this tell us? Remember that we started our investigation with the goal of understanding why Boxy’s linear motion feels unnatural and robotic? At a glance, this graph we’ve just constructed doesn’t tell us anything about that. We need to go deeper.

Keep the graph in mind and let’s talk for a minute about speed. I know you know what speed is — I’d just like to put it in mathematical terms. As it goes, the formula for speed is this:

Mathematical formula for speed33
Mathematical formula for speed (View large version34)

Therefore, if a car covers a distance of 100 kilometers in 1 hour, we say its speed is 100 kilometers per hour.

Representing speed35
Representing speed (View large version36)

If the car doubles its speed, it will start covering double the distance (200 kilometers) in the same interval (1 hour), or, in other words, it will cover the original distance of 100 kilometers in half the time (0.5 hours). Make sense?

Similarly, if the car halved its speed (that is, slowed down by half), it would start covering a distance of 50 kilometers in the same interval (1 hour), or, in other words, it would cover the original distance of 100 kilometers in twice the time (2 hours).

Great! With that out of the way, let’s pick up where we left off. We were trying to figure out how the graph between distance and time can help us understand why Boxy’s linear motion feels robotic.

Hey, wait a second! We have a graph between distance and time, and speed can be calculated from distance and time, can’t it? Let’s try to calculate Boxy’s speed at different time intervals.

Calculating speed at different intervals37
Calculating speed at different intervals (View large version38)

Here, I’ve chosen three different time intervals: one near the start, one in the middle and one at the end near the final position. As is evident, at all three intervals, Boxy has exactly the same speed (s1 = s2 = s3) of 1000 pixels per second; that is, no matter what interval you choose in the graph above, you will find Boxy moving at 1000 pixels per second. Isn’t that odd? Things in real life don’t move at a constant speed; they start out slowly, gradually increase their speed, move for a while, and then slow down again before stopping, but Boxy abruptly starts with a speed of 1000 pixels per second, moving with the same speed and abruptly stopping at exactly the same speed. This is why Boxy’s movement feels robotic and unnatural. We are going to have to change our graph to fix this. But before diving in, we’ll need to know how changes to the speed will affect the graph drawn between distance and time. Ready? This is going to be fun.

Let’s double Boxy’s speed and see how the appearance of the graph changes in response. Boxy’s original speed, as we calculated above, is 1000 pixels per second. Because we have doubled the speed, Boxy will now be able to cover the distance of 1000 pixels in half the time — that is, in 0.5 seconds. Let’s put that on a graph.

Graph showing double speed39
Graph showing double speed (View large version40)

What if we tripled the speed? Boxy now covers 1000 pixels in one third of the time (a third of a second).

Graph showing triple speed41
Graph showing triple speed (View large version42)

Hmm, notice something? Notice how, when the graph changes, the angle that the line makes with the time axis increases as the speed increases.

All right, let’s go ahead and halve Boxy’s speed. Halving its speed means that Boxy will be able to cover only 500 pixels (half the original distance) in 1 second. Let’s put this on a graph.

Graph showing half speed43
Graph showing half speed (View large version44)

Let’s slow down Boxy a little more, making the speed one third of the original. Boxy will be able to cover one third of the original distance in 1 second.

Graph showing a third of the speed45
Graph showing a third of the speed (View large version46)

See a pattern? The line gets steeper and steeper as we increase Boxy’s speed, and starts to flatten out as we slow Boxy down.

Line gets steeper as speed increases and flattens out as speed decreases47
Line gets steeper as speed increases and flattens out as speed decreases. (View large version48)

This makes sense because, for a steeper line, a little progress in time produces a much higher change in distance, implying greater speed.

A small change in time produces a relatively large change in distance, making for a steeper graph.49
A small change in time produces a relatively large change in distance, making for a steeper graph. (View large version50)
A small change in time produces a relatively large change in distance, making for a steeper graph.51
A small change in time produces a relatively large change in distance, making for a steeper graph. (View large version52)

On the other hand, for a line that is less steep, a large change in time produces only a little change in distance, meaning a lower speed.

Change in time verus change in distance in a graph that is less steep53
Change in time versus change in distance in a graph that is less steep (View large version54)
Change in time versus change in distance in a graph that is less steep55
Change in time versus change in distance in a graph that is less steep (View large version56)

With all of the changes we have made, Boxy is still moving in a linear fashion, just at different speeds. However, with our newly gained knowledge of how changes to distance versus time can affect speed, we can experiment and draw a graph that makes Boxy move in a way that looks natural and realistic.

Let’s take it step by step. First, things in real life start out slow and slowly increase in speed. So, let’s do that.

In all of the iterations of the graph shown below, you will notice that the points at opposite corners remain fixed. This is because we are not changing the duration for which the animation runs, nor are we changing the distance that Boxy travels.

Constructing a custom motion curve57
Constructing a custom motion curve (View large version58)

If Boxy is to follow the graph above, it will move at a slower speed for 0.25 seconds, because the line is less steep starting from 0 to 0.25 seconds, and then it will abruptly switch to a higher speed after 0.25 seconds (the reason being that the line in the graph gets steeper after 0.25 seconds). We will need to smoothen this transition, though; we don’t want any corners — it’s called a motion curve, after all. Let’s convert that corner to a curve.

Constructing a custom motion curve59
Constructing a custom motion curve (View large version60)

Notice the smooth transition that Boxy undergoes from being at rest to gradually increasing in speed.

Boxy following the motion curve above61
Boxy following the motion curve above (View large version62)

Good! Next, objects in real life progressively slow down before stopping. Let’s change the graph to make that happen. Again, we’ll pick up a point in time after which we would like Boxy to start slowing down. How about around 0.6 seconds? I have smoothened out the transition’s corner to a curve here already.

Final custom motion curve63
Final custom motion curve (View large version64)

Look at Boxy go! A lot more natural, isn’t it?

Boxy following the custom motion curve65
Boxy following the custom motion curve (View large version66)

The curve we drew in place of the corner is actually a collection of many small line segments; and, as you already know, the steeper the line on the graph, the higher the speed, and the flatter the line, the slower the speed. Notice how in the left part of the image, the line segments that make up the curve get steeper and steeper, resulting in a gradual increase in speed, and progressively flatten out on the right side, resulting in the speed progressively decreasing?

A curve is nothing but a collection of many line segments.67
A curve is nothing but a collection of many line segments. (View large version68)

With all of this knowledge, making sense of motion curves becomes much easier. Let’s look at a few examples.

69
(View Large version)70
Example 171
Example 1 (View large version72)
73
(View Large version)74
Example 275
Example 2 (View large version8076)
77
(View Large version)78
Example 379
Example 3 (View large version8076)

Using Motion Curves In UI Animation Link

The next time you have to animate a UI element, you will have the power of motion curves at your disposal. Whether it’s a slide-out bar, a modal window or a dropdown menu, adding the right amount of animation and making it look smooth and natural will increase the quality of your user interface greatly. It will make the user interface just feel good. Take the slide-out menu below:

See the Pen nJial82 by Nash Vail (@nashvail9883) on CodePen9984.

Clicking on the hamburger menu brings in the menu from left, but the animation feels blocky. Line 51 of the CSS shows that the animation has transition-timing-function set to linear. We can improve this. Let’s head on over to cubic-bezier9385 and create a custom timing function.

If you’re reading this, it’s safe to assume that you’re a designer or a developer or both and, hence, no stranger to cubic bezier curves; there’s a good chance you’ve encountered them at least once. Bezier curves are a marvel. They are used primarily in computer graphics to draw shapes and are used in tools such as Sketch86 and Adobe Illustrator87 to draw vector graphics. The reason why cubic bezier curves are so popular is that they are so easy to use: Just modify the positions of the four different points, and create the kind of curve you need.

Because we always know the initial and final states of the animated object, we can fix two of the points. That leaves just two points whose positions we have to modify. The two fixed points are called anchor points, and the remaning two are control points.

Parts of a bezier curve88
Parts of a bezier curve (View large version89)

As you remember, cubic-bezier accepts four numbers (n1, n2, n3, n4) when you create a custom transition-timing-function. These four numbers represent nothing but the positions of the two control points: n1, n2 represents the x and y coordinates of the first control point, and n3, n4 represents the coordinates of the second control point. Because changing the position of the control points will change the shape of the curve and, hence, our animation overall, the result is the same when any or all of n1, n2, n3, n4 is modified. For example, the figure below represents cubic-bezier(.14, .78, .89, .35):

A cubic bezier curve representing (.14, .78, .89, .35).90
A cubic bezier curve representing (.14, .78, .89, .35) (View large version91)

The math behind these seemingly simple curves92 is fascinating.

All right, all right, let’s get back to where we were going with cubic-bezier9385: creating a custom transition-timing-function. I want the kind of animation in which the menu slides in very quickly and then gracefully slows down and ends:

Adjusting the cubic bezier curve94
Adjusting the cubic bezier curve (View large version95)

This looks good. The animation will start out fast and then slow down, rather than move at a constant speed throughout. I am simply going to copy cubic-bezier(.05, .69, .14, 1) from the top of the page and replace linear with it.

See the Pen nJial97 by Nash Vail (@nashvail9883) on CodePen9984.

See the difference? The second iteration feels much more natural and appealing. Imagine if every animation in your UI followed a natural timing function. How great would that be?

As we’ve seen, motion curves aren’t tricky at all. They are very easy to understand and use. With them, you can take your UI to the next level.

I hope you’ve learned how motion curves work. If you were going through a lot of trial and error to get motion curves to work the way you want, or if you were not using them at all, you should now be comfortable bending them to your will and creating beautiful animations. Because, after all, animation matters.

(al)

Footnotes Link

  1. 1 http://www.uplabs.com
  2. 2 https://www.smashingmagazine.com/2015/12/animating-clipped-elements-svg/
  3. 3 https://www.smashingmagazine.com/2015/06/practical-techniques-on-designing-animation/
  4. 4 https://www.smashingmagazine.com/2015/09/creating-cel-animations-with-svg/
  5. 5 https://www.smashingmagazine.com/2014/11/the-state-of-animation-2014/
  6. 6 https://developer.mozilla.org/en/docs/Web/CSS/transition-timing-function
  7. 7 https://dribbble.com/LukasStranak
  8. 8 http://cubic-bezier.com
  9. 9 https://matthewlein.com/ceaser/
  10. 10 https://dribbble.com/m-2-h
  11. 11 http://www.adobe.com/products/aftereffects.html
  12. 12 https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties
  13. 13 https://www.smashingmagazine.com/wp-content/uploads/2016/08/fig26_large-opt-1.png
  14. 14 https://www.smashingmagazine.com/wp-content/uploads/2016/08/fig26_large-opt-1.png
  15. 15 https://css-tricks.com/almanac/properties/t/transform/#article-header-id-3
  16. 16 https://www.smashingmagazine.com/wp-content/uploads/2016/08/fig27_large-opt.png
  17. 17 https://www.smashingmagazine.com/wp-content/uploads/2016/08/fig27_large-opt.png
  18. 18 image-large-preview.jpg
  19. 19 image-credit-URL
  20. 20 large-preview.jpg
  21. 21 https://www.smashingmagazine.com/wp-content/uploads/2016/08/fig1_large-opt.png
  22. 22 https://www.smashingmagazine.com/wp-content/uploads/2016/08/fig1_large-opt.png
  23. 23 https://www.smashingmagazine.com/wp-content/uploads/2016/08/fig2_large-opt.png
  24. 24 https://www.smashingmagazine.com/wp-content/uploads/2016/08/fig2_large-opt.png
  25. 25 https://www.smashingmagazine.com/wp-content/uploads/2016/08/fig3_large-opt.png
  26. 26 https://www.smashingmagazine.com/wp-content/uploads/2016/08/fig3_large-opt.png
  27. 27 https://www.smashingmagazine.com/wp-content/uploads/2016/08/fig4_large-opt.png
  28. 28 https://www.smashingmagazine.com/wp-content/uploads/2016/08/fig4_large-opt.png
  29. 29 https://www.smashingmagazine.com/wp-content/uploads/2016/08/fig5_large-opt.png
  30. 30 https://www.smashingmagazine.com/wp-content/uploads/2016/08/fig5_large-opt.png
  31. 31 https://www.smashingmagazine.com/wp-content/uploads/2016/08/fig6_large-opt.png
  32. 32 https://www.smashingmagazine.com/wp-content/uploads/2016/08/fig6_large-opt.png
  33. 33 https://www.smashingmagazine.com/wp-content/uploads/2016/08/fig7_large-opt.png
  34. 34 https://www.smashingmagazine.com/wp-content/uploads/2016/08/fig7_large-opt.png
  35. 35 https://www.smashingmagazine.com/wp-content/uploads/2016/08/fig8_large-opt.png
  36. 36 https://www.smashingmagazine.com/wp-content/uploads/2016/08/fig8_large-opt.png
  37. 37 https://www.smashingmagazine.com/wp-content/uploads/2016/08/fig9_large-opt.png
  38. 38 https://www.smashingmagazine.com/wp-content/uploads/2016/08/fig9_large-opt.png
  39. 39 https://www.smashingmagazine.com/wp-content/uploads/2016/08/fig10_large-opt.png
  40. 40 https://www.smashingmagazine.com/wp-content/uploads/2016/08/fig10_large-opt.png
  41. 41 https://www.smashingmagazine.com/wp-content/uploads/2016/08/fig11_large-opt.png
  42. 42 https://www.smashingmagazine.com/wp-content/uploads/2016/08/fig11_large-opt.png
  43. 43 https://www.smashingmagazine.com/wp-content/uploads/2016/08/fig12_large-opt.png
  44. 44 https://www.smashingmagazine.com/wp-content/uploads/2016/08/fig12_large-opt.png
  45. 45 https://www.smashingmagazine.com/wp-content/uploads/2016/08/fig13_large-opt.png
  46. 46 https://www.smashingmagazine.com/wp-content/uploads/2016/08/fig13_large-opt.png
  47. 47 https://www.smashingmagazine.com/wp-content/uploads/2016/08/fig14_large-opt.png
  48. 48 https://www.smashingmagazine.com/wp-content/uploads/2016/08/fig14_large-opt.png
  49. 49 https://www.smashingmagazine.com/wp-content/uploads/2016/08/fig15_large-opt.png
  50. 50 https://www.smashingmagazine.com/wp-content/uploads/2016/08/fig15_large-opt.png
  51. 51 https://www.smashingmagazine.com/wp-content/uploads/2016/08/fig16_large-opt.png
  52. 52 https://www.smashingmagazine.com/wp-content/uploads/2016/08/fig16_large-opt.png
  53. 53 https://www.smashingmagazine.com/wp-content/uploads/2016/08/fig17_large-opt.png
  54. 54 https://www.smashingmagazine.com/wp-content/uploads/2016/08/fig17_large-opt.png
  55. 55 https://www.smashingmagazine.com/wp-content/uploads/2016/08/fig18_large-opt.png
  56. 56 https://www.smashingmagazine.com/wp-content/uploads/2016/08/fig18_large-opt.png
  57. 57 https://www.smashingmagazine.com/wp-content/uploads/2016/08/fig19_large-opt.png
  58. 58 https://www.smashingmagazine.com/wp-content/uploads/2016/08/fig19_large-opt.png
  59. 59 https://www.smashingmagazine.com/wp-content/uploads/2016/08/fig20_large-opt.png
  60. 60 https://www.smashingmagazine.com/wp-content/uploads/2016/08/fig20_large-opt.png
  61. 61 images-in-article/fig19_large.png
  62. 62 images-in-article/fig19_large.png
  63. 63 https://www.smashingmagazine.com/wp-content/uploads/2016/08/fig21_large-opt.png
  64. 64 https://www.smashingmagazine.com/wp-content/uploads/2016/08/fig21_large-opt.png
  65. 65 images-in-article/fig22_large.png
  66. 66 images-in-article/fig22_large.png
  67. 67 https://www.smashingmagazine.com/wp-content/uploads/2016/08/fig22_large-opt.png
  68. 68 https://www.smashingmagazine.com/wp-content/uploads/2016/08/fig22_large-opt.png
  69. 69 https://www.smashingmagazine.com/wp-content/uploads/2016/08/fig23_large-opt.png
  70. 70 https://www.smashingmagazine.com/wp-content/uploads/2016/08/fig23_large-opt.png
  71. 71 images-in-article/fig23_large.png
  72. 72 images-in-article/fig23_large.png
  73. 73 https://www.smashingmagazine.com/wp-content/uploads/2016/08/fig24_large-opt.png
  74. 74 https://www.smashingmagazine.com/wp-content/uploads/2016/08/fig24_large-opt.png
  75. 75 images-in-article/fig25_large.png
  76. 76 images-in-article/fig25_large.png
  77. 77 https://www.smashingmagazine.com/wp-content/uploads/2016/08/fig25_large-opt.png
  78. 78 https://www.smashingmagazine.com/wp-content/uploads/2016/08/fig25_large-opt.png
  79. 79 images-in-article/fig25_large.png
  80. 80 images-in-article/fig25_large.png
  81. 81 http://codepen.io/nashvail
  82. 82 ‘http://codepen.io/nashvail/pen/qNYmLG/’
  83. 83 ‘http://codepen.io/nashvail’
  84. 84 ‘http://codepen.io’
  85. 85 http://cubic-bezier.com
  86. 86 https://www.sketchapp.com/
  87. 87 http://www.adobe.com/in/products/illustrator.html
  88. 88 https://www.smashingmagazine.com/wp-content/uploads/2016/08/fig28_large-opt.png
  89. 89 https://www.smashingmagazine.com/wp-content/uploads/2016/08/fig28_large-opt.png
  90. 90 https://www.smashingmagazine.com/wp-content/uploads/2016/08/fig29_large-opt.png
  91. 91 https://www.smashingmagazine.com/wp-content/uploads/2016/08/fig29_large-opt.png
  92. 92 https://medium.freecodecamp.com/nerding-out-with-bezier-curves-6e3c0bc48e2f#.113c4usq9
  93. 93 http://cubic-bezier.com
  94. 94 https://www.smashingmagazine.com/wp-content/uploads/2016/08/bezierDemo.gif
  95. 95 https://www.smashingmagazine.com/wp-content/uploads/2016/08/bezierDemo.gif
  96. 96 http://codepen.io/nashvail
  97. 97 ‘http://codepen.io/nashvail/pen/rLvymO/’
  98. 98 ‘http://codepen.io/nashvail’
  99. 99 ‘http://codepen.io’
SmashingConf New York

Hold on, Tiger! Thank you for reading the article. Did you know that we also publish printed books and run friendly conferences – crafted for pros like you? Like SmashingConf Barcelona, on October 25–26, with smart design patterns and front-end techniques.

↑ Back to top

Tweet itShare on Facebook

Article source: https://www.smashingmagazine.com/2016/08/css-animations-motion-curves/

Tags:


Submit a Review




If you want a picture to show with your review, go get a Gravatar.

1&1 has shared hosting and dedicated hosting solutions for every budget and free domains with all hosting packages!  StartLogic - Affordable hosting: Free setup/domain, unlimited emails, PHP, mySQL, CGI, FrontPage. As low as $3.95/month
Cloud ecommerce platform delivers more traffic, higher conversion and unmatched performance

© Copyright 2008 Tyconia International, Inc. All Rights Reserved.