{"id":280052,"date":"2018-12-17T08:12:13","date_gmt":"2018-12-17T15:12:13","guid":{"rendered":"http:\/\/css-tricks.com\/?p=280052"},"modified":"2018-12-17T08:12:13","modified_gmt":"2018-12-17T15:12:13","slug":"reversing-an-easing-curve","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/reversing-an-easing-curve\/","title":{"rendered":"Reversing an Easing Curve"},"content":{"rendered":"<p>Let\u2019s take a look at a carousel I worked on where items slide in and out of view with CSS animations. To get each item to slide in and out of view nicely I used a cubic-bezier for the <code>animation-timing-function<\/code> property, instead of using a standard easing keyword.<\/p>\n<p><!--more--><\/p>\n<p data-height=\"547\" style=\"height: 547px; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1rem 0; padding: 1rem; overflow: auto;\" data-theme-id=\"1\" data-slug-hash=\"OaYpWp\" data-default-tab=\"result\" data-user=\"michellebarker\" data-pen-title=\"Carousel with reversed easing curve\" class=\"codepen\">See the Pen <a href=\"https:\/\/codepen.io\/michellebarker\/pen\/OaYpWp\/\" rel=\"noopener\">Carousel with reversed easing curve<\/a> by Michelle Barker (<a href=\"https:\/\/codepen.io\/michellebarker\" rel=\"noopener\">@michellebarker<\/a>) on <a href=\"https:\/\/codepen.io\" rel=\"noopener\">CodePen<\/a>.<\/p>\n<p>A cubic-bezier can appear confusing at first glance, but when used correctly, it can add a nice touch to the user experience.<\/p>\n<p>While building this carousel, I realized I not only needed a custom animation curve, but had to use it in reverse as well to get the effect right. I figured it was worth sharing what I learned because creating a custom curve and reversing it may seem tricky, but it\u2019s actually pretty straightforward.<\/p>\n<h3>First, a primer on easing<\/h3>\n<p><a href=\"https:\/\/developers.google.com\/web\/fundamentals\/design-and-ux\/animations\/the-basics-of-easing\" rel=\"noopener\">Easing<\/a> is the word used to describe the acceleration and deceleration of an animation\u2019s progress along a timeline. We can plot this as a graph, where <strong>x<\/strong> is time and <strong>y<\/strong> is the animation\u2019s progress. The graph for a linear animation, which has no acceleration or deceleration (it moves at the same speed all the way through), is a straight line:<\/p>\n<figure id=\"post-280106\" class=\"align-none media-280106\"><img decoding=\"async\" src=\"https:\/\/css-tricks.com\/wp-content\/uploads\/2018\/12\/easing-linear-a-1.svg\" alt=\"Linear easing graph\" \/><\/figure>\n<p>Non-linear easing is what gives animations a more natural, life-like feel. We can apply easing to transitions and animations in CSS. The <a href=\"https:\/\/css-tricks.com\/almanac\/properties\/a\/animation\/\"><code>animation-timing-function<\/code><\/a> property allows us to define the easing on an animation. (The same options are available for <a href=\"https:\/\/css-tricks.com\/almanac\/properties\/t\/transition-timing-function\/\"><code>transition-timing-function<\/code><\/a>.) We have four keywords to choose from:<\/p>\n<ul>\n<li><code>linear<\/code> \u2013 as described above<\/li>\n<li><code>ease-in<\/code> \u2013 the animation starts off slow and accelerates as it progresses<\/li>\n<li><code>ease-out<\/code> \u2013 the animation starts off fast and decelerates towards the end<\/li>\n<li><code>ease-in-out<\/code> \u2013 the animation starts off slowly, accelerates in the middle and slows down towards the end<\/li>\n<li><code>ease<\/code> \u2013 the default value, a variant on <code>ease-in-out<\/code><\/li>\n<h3>Getting to know cubic-bezier<\/h3>\n<p>If none of those options suit our animation, we can create a custom easing curve using the <code>cubic-bezier<\/code> function. Here\u2019s an example:<\/p>\n<pre rel=\"CSS\"><code class=\"language-css\">.my-element {\r\n  animation-name: slide;\r\n  animation-duration: 3s;\r\n  animation-timing-function: cubic-bezier(0.45, 0.25, 0.60, 0.95);\r\n}<\/code><\/pre>\n<p>If we prefer, we can write these properties as shorthand, like this:<\/p>\n<pre rel=\"CSS\"><code class=\"language-css\">.my-element {\r\n  animation: slide 3s cubic-bezier(0.45, 0.25, 0.60, 0.95);\r\n}<\/code><\/pre>\n<p>You\u2019ll notice the <code>cubic-bezier<\/code> function takes four values. These are the two pairs of coordinates needed in order to plot our curve onto the graph. What do those coordinates represent? Well, if you\u2019ve used vector illustration programs, like Illustrator, the idea of vector points and \u201chandles\u201d that control the size and direction of the curve might be familiar to you. This is essentially what we\u2019re plotting with a cubic-bezier curve.<\/p>\n<p>We don\u2019t need to know about all the maths behind cubic-bezier curves in order to create a nice animation. Luckily there are plenty of online tools, like <a href=\"http:\/\/cubic-bezier.com\" rel=\"noopener\">cubic-bezier.com<\/a> by Lea Verou, that allow us to visualize an easing curve and copy the values. This is what I did for the above easing curve, which looks like this:<\/p>\n<figure id=\"post-280108\" class=\"align-none media-280108\"><img decoding=\"async\" src=\"https:\/\/css-tricks.com\/wp-content\/uploads\/2018\/12\/easing-01-a.svg\" alt=\"Cubic-bezier easing graph\" \/><\/figure>\n<p>Here, we can see the two points we need to plot, where the cubic-bezier function is <code>cubic-bezier(x1, y1, x2, y2)<\/code>.<\/p>\n<figure id=\"post-280109\" class=\"align-none media-280109\"><img decoding=\"async\" src=\"https:\/\/css-tricks.com\/wp-content\/uploads\/2018\/12\/easing-02-a.svg\" alt=\"Cubic-bezier easing graph showing co-ordinates\" \/><\/figure>\n<h3>Applying easing in two directions<\/h3>\n<p>My carousel rotates in both directions &mdash; if you click the left arrow, the current item slides out of view to the right, and the next item slides in from the left; and if you click the right arrow, the reverse happens. For the items to slide into or out of view, a class is added to each item, depending on whether the user has clicked the &#8220;next\u201d or \u201cprevious\u201d button. My initial assumption was that I could simply reverse the <code>animation-direction<\/code> for items sliding out in the opposite direction, like this:<\/p>\n<pre rel=\"CSS\"><code class=\"language-css\">.my-element--reversed {\r\n  animation: slide 3s cubic-bezier(0.45, 0.25, 0.60, 0.95) reverse;\r\n}<\/code><\/pre>\n<p>There\u2019s just one problem: reversing the animation also reversed the easing curve! So, now my animation looks great in one direction, but is completely off in the other direction. Oh no!<\/p>\n<p>In this demo, the first box shows the initial animation (an item sliding left-to-right) and the second box shows what happens when the <code>animation-direction<\/code> is reversed.<\/p>\n<p data-height=\"717\" style=\"height: 717px; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1rem 0; padding: 1rem; overflow: auto;\" data-theme-id=\"1\" data-slug-hash=\"eQQqLv\" data-default-tab=\"result\" data-user=\"michellebarker\" data-pen-title=\"Reverse animation\" class=\"codepen\">See the Pen <a href=\"https:\/\/codepen.io\/michellebarker\/pen\/eQQqLv\/\" rel=\"noopener\">Reverse animation<\/a> by Michelle Barker (<a href=\"https:\/\/codepen.io\/michellebarker\" rel=\"noopener\">@michellebarker<\/a>) on <a href=\"https:\/\/codepen.io\" rel=\"noopener\">CodePen<\/a>.<\/p>\n<p>You can see the two animations don\u2019t have the same feel at all. The first box speeds up early on and slows down gently as it progresses, while the second box starts off quite sluggish, then gains a burst of speed before abruptly slowing down. This wouldn\u2019t feel right at all for a carousel.<\/p>\n<p>We have a choice between two options to achieve this:<\/p>\n<ol>\n<li>We could create a new keyframe animation to animate the items out, and then apply the same easing as before. That\u2019s not too hard in this example, but what if we have a more complex animation? It would take quite a bit more work to create the same animation in reverse, and we could easily make a mistake.<\/li>\n<li>We could use the same keyframe animation (with the <code>animation-direction: reverse<\/code>) and invert the easing curve so we get the same easing in both directions. This isn\u2019t too hard to do, either.<\/code><\/li>\n<\/ol>\n<p>To reverse the easing curve for our reversed animation we need to rotate the curve 180 degrees on its axis and find the new coordinates.<\/p>\n<figure id=\"post-280110\" class=\"align-none media-280110\"><img decoding=\"async\" src=\"https:\/\/css-tricks.com\/wp-content\/uploads\/2018\/12\/easing-03-a.svg\" alt=\"Comparing original easing graph with reversed graph\" \/><\/figure>\n<p>We can do this with some simple maths &mdash; by switching the coordinate pairs and subtracting each value from 1.<\/p>\n<p>To visualize this, imagine that our original values are:<\/p>\n<pre><code>x1, y1, x2, y2<\/code><\/pre>\n<p>Our reversed values will be:<\/p>\n<pre><code>(1 - x2), (1 - y2), (1 - x1), (1 - y1)<\/code><\/pre>\n<p>In this demo, the third box shows what we want to happen: the item sliding in the opposite direction, but with the easing reversed to give it the same feel.<\/p>\n<p data-height=\"979\" style=\"height: 979px; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1rem 0; padding: 1rem; overflow: auto;\" data-theme-id=\"1\" data-slug-hash=\"rQmKma\" data-default-tab=\"result\" data-user=\"michellebarker\" data-pen-title=\"CSS Variables to reverse easing\" class=\"codepen\">See the Pen <a href=\"https:\/\/codepen.io\/michellebarker\/pen\/rQmKma\/\" rel=\"noopener\">CSS Variables to reverse easing<\/a> by Michelle Barker (<a href=\"https:\/\/codepen.io\/michellebarker\" rel=\"noopener\">@michellebarker<\/a>) on <a href=\"https:\/\/codepen.io\" rel=\"noopener\">CodePen<\/a>.<\/p>\n<p>Let\u2019s walk through how we can calculate the reversed easing curve.<\/p>\n<h3>Calculating the new curve with CSS variables<\/h3>\n<p>We can use CSS variables to calculate the new curve for us! Lets assign each value to a variable:<\/p>\n<pre rel=\"CSS\"><code class=\"language-css\">:root {\r\n  --x1: 0.45;\r\n  --y1: 0.25;\r\n  --x2: 0.6;\r\n  --y2: 0.95;\r\n  \r\n  --originalCurve: cubic-bezier(var(--x1), var(--y1), var(--x2), var(--y2));\r\n}<\/code><\/pre>\n<p>Then we can use those variables to calculate the new values:<\/p>\n<pre rel=\"CSS\"><code class=\"language-css\">:root {\r\n  --reversedCurve: cubic-bezier(calc(1 - var(--x2)), calc(1 - var(--y2)), calc(1 - var(--x1)), calc(1 - var(--y1)));\r\n}<\/code><\/pre>\n<p>Now, if we make any changes to the first set of variables, the reversed curve will be calculated automatically. To make this a bit easier to scan when examining and debugging our code, I like to break these new values out into their own variables:<\/p>\n<pre rel=\"CSS\"><code class=\"language-css\">:root {\r\n  \/* Original values *\/\r\n  --x1: 0.45;\r\n  --y1: 0.25;\r\n  --x2: 0.6;\r\n  --y2: 0.95;\r\n  \r\n  --originalCurve: cubic-bezier(var(--x1), var(--y1), var(--x2), var(--y2));\r\n  \r\n  \/* Reversed values *\/\r\n  --x1-r: calc(1 - var(--x2));\r\n  --y1-r: calc(1 - var(--y2));\r\n  --x2-r: calc(1 - var(--x1));\r\n  --y2-r: calc(1 - var(--y1));\r\n  \r\n  --reversedCurve: cubic-bezier(var(--x1-r), var(--y1-r), var(--x2-r), var(--y2-r));\r\n}<\/code><\/pre>\n<p>Now all that remains is to apply the new curve to our reversed animation:<\/p>\n<pre rel=\"CSS\"><code class=\"language-css\">.my-element--reversed {\r\n  animation: slide 3s var(--reversedCurve) reverse;\r\n}<\/code><\/pre>\n<p>To help visualize this, I\u2019ve built a little tool to calculate the reversed values of a cubic-bezier. Enter the original coordinate values to get the reversed curve:<\/p>\n<p data-height=\"1182\" style=\"height: 1182px; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1rem 0; padding: 1rem; overflow: auto;\" data-theme-id=\"1\" data-slug-hash=\"jQpwKq\" data-default-tab=\"result\" data-user=\"michellebarker\" data-pen-title=\"Reverse cubic-bezier\" class=\"codepen\">See the Pen <a href=\"https:\/\/codepen.io\/michellebarker\/pen\/jQpwKq\/\" rel=\"noopener\">Reverse cubic-bezier<\/a> by Michelle Barker (<a href=\"https:\/\/codepen.io\/michellebarker\" rel=\"noopener\">@michellebarker<\/a>) on <a href=\"https:\/\/codepen.io\" rel=\"noopener\">CodePen<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Let\u2019s take a look at a carousel I worked on where items slide in and out of view with CSS animations. To get each item to slide in and out of view nicely I used a cubic-bezier for the animation-timing-function property, instead of using a standard easing keyword.<\/p>\n","protected":false},"author":254236,"featured_media":280059,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"What's an easy way to reverse a custom easing curve? Michelle Barker has a handy way to do it.","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[4],"tags":[612,1549,726],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/12\/easing-featured.png?fit=1200%2C600&ssl=1","jetpack-related-posts":[{"id":340036,"url":"https:\/\/css-tricks.com\/advanced-css-animation-using-cubic-bezier\/","url_meta":{"origin":280052,"position":0},"title":"Advanced CSS Animation Using cubic-bezier()","date":"May 13, 2021","format":false,"excerpt":"When dealing with complex CSS animations, there is a tendency to create expansive @keyframes with lots of declarations. There are a couple of tricks though that I want to talk about that might help make things easier, while staying in vanilla CSS: Multiple animationsTiming functions The first one is more\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/05\/advanced-CSS-animations.png?fit=1200%2C625&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":373600,"url":"https:\/\/css-tricks.com\/pure-css-bezier-curve-motion-paths\/","url_meta":{"origin":280052,"position":1},"title":"Pure CSS Bezier Curve Motion Paths","date":"October 17, 2022","format":false,"excerpt":"Besides being elegant, Bezier curves have nice mathematical properties due to their definition and construction. No wonder they are widely used in so many areas! Now, how about using Bezier curves as motion paths with CSS?","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/10\/css-cubic-bezier-animation-path-header.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":344249,"url":"https:\/\/css-tricks.com\/build-complex-css-transitions-using-custom-properties-and-cubic-bezier\/","url_meta":{"origin":280052,"position":2},"title":"Build Complex CSS Transitions using Custom Properties and cubic-bezier()","date":"July 14, 2021","format":false,"excerpt":"I recently illustrated how we can achieve complex CSS animations using cubic-bezier() and how to do the same when it comes to CSS transitions. I was able to create complex hover effect without resorting to keyframes. In this article, I will show you how to create even more complex CSS\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/07\/complex-transition.png?fit=1183%2C659&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":241825,"url":"https:\/\/css-tricks.com\/ease-out-in-ease-in-out\/","url_meta":{"origin":280052,"position":3},"title":"ease-out, in; ease-in, out","date":"May 18, 2016","format":false,"excerpt":"We got to talking about easing in a recent episode of ShopTalk with Val Head and Sarah Drasner. Easing is important stuff when it comes to animations and transitions. Combined with the duration, it has a huge effect on the feel of change. If you're taking animation seriously as part\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":247198,"url":"https:\/\/css-tricks.com\/introduction-mo-js\/","url_meta":{"origin":280052,"position":4},"title":"An Introduction to mo.js","date":"November 17, 2016","format":false,"excerpt":"mo.js is a JavaScript library devoted to motion for the web. It offers a declarative syntax motion and the creation of elements for animation. Even though mo.js is still in beta, there is already a host of amazing features to play with. Its author, Oleg Solomoka (otherwise known as @legomushroom)\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":8804,"url":"https:\/\/css-tricks.com\/get-your-css-easing-code-here\/","url_meta":{"origin":280052,"position":5},"title":"Get Your CSS Easing Code Here","date":"March 21, 2011","format":false,"excerpt":"A code generation and visualization tool by Matthew Lein for CSS3 transition timing functions. Biggest triumph? Making cubic bezier understandable.","rel":"","context":"In &quot;Link&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/280052"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/254236"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=280052"}],"version-history":[{"count":8,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/280052\/revisions"}],"predecessor-version":[{"id":280113,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/280052\/revisions\/280113"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/280059"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=280052"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=280052"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=280052"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}