A better tool for cubic-bezier() easing

A few days ago, I had a talk at a conference in Zurich (I’m going to write more about it in another post). The talk was about “10 things you might not know about CSS3″. The first of those things was how you can do bouncing transitions with cubic-bezier() instead of an easing keyword. As usual, my slides included a few live demos of the functionality, in which I edited the cubic-bezier() parameters and the audience could see the transition produced.

However, in the case of cubic-bezier() that’s not enough. No matter how much you see someone changing the parameters, if you don’t picture it in a 2D plane, it’s very hard to understand how it works. So, the night before, I searched for a tool I could use to show them how bezier curves are formed. I found plenty, but all of them restricted the the coordinates to the 0-1 range. I’m not sure if the cause is ignorance about the spec changes or that Webkit hasn’t caught up with those changes yet (but it will, soon). The only one that supported values out of range was this one from the Opera Dragonfly developers, but I found it kinda impossible to adapt.

For my talk, I tried to adapt one of them but it was late so I gave up after a while and ended up just showing them a screenshot. And the day after the talk, I started adapting this to my needs (ever tried coding at a conference? It’s awesome, you get to ask questions from very knowledgeable people and ger replies straight away). And then I started cleaning up the code, changing how it worked, adding features. At this point, I think the only thing that’s left from that tool is …the HTML5 doctype. After 3-4 days, I finished it, and got it its own domain, cubic-bezier.com (I was surprised it was still free).

So, in a nutshell, what makes this better?

Lots of things:

  • It supports y values out of range, as per the latest version of the spec (and shows a warning for Webkit)
  • It’s fully accessible from the keyboard
  • You can move the handles not only by dragging but also by clicking on the plane or using the keyboard arrow keys
  • You can mouse over the plane and see the progression and time percentages that correspond to every point
  • You can save curves you like in your “Library” (uses localStorage to persist them)
  • You can import and export curves to/from your library to share them with others
  • You can share a permalink to every curve. For example, here’s a bouncing transition (FF & Opera only)
  • You can compare the current curve with any in your library, setting the duration yourself
  • Custom favicon that reflects the current curve

Cool stuff used

Given that this tool is not only for developers, but for badass developers that care about stuff like cubic-bezier(), I think I can safely assume they’re using a top notch browser. So, I went crazy with using cool modern stuff:

  • HTML5: Canvas, localStorage, History API, range inputs, oninput event, output, classList, data- attributes
  • ES5: Accessors, Array#map, Array#forEach
  • Selectors API
  • JSON
  • CSS3: Transitions, gradients, media queries, border-radius, shadows, :in-range pseudoclass, box-sizing, transforms, text-overflow
I also used my tiny chaining framework, Chainvas throughout this project.

Browser support

So far, I’ve tested it in modern versions of Chrome, Firefox, Opera and Safari and it seems to work. I haven’t tested it in IE10 (too lazy to open vm), although I want it to work there too, so if it doesn’t let me know. :)

Enjoy! cubic-bezier.com

  • mstalfoort

    this is totally wicked, like it a lot

    thumbs up, nicely done 

    • clara shen

      very useful! thx

  • mstalfoort

    this is totally wicked, like it a lot

    thumbs up, nicely done 

  • http://twitter.com/calvein François Robichet

    I was looking for this yesterday so it’s very usefull to me. I just found something that make me sad, we can’t edit the values without using the graph.

    • http://leaverou.me Lea Verou

      You can fine tune it with the keyboard arrow keys (use Shift for bigger increments)

      • http://twitter.com/calvein François Robichet

        I didn’t notice that, great !

  • Anonymous

    Very nice, though it doesn’t work with ie10 preview 2 (SCRIPT87: Invalid argument.
    chainvas.min.js, line 6 character 76)

    • http://leaverou.me Lea Verou

      Thanks! I’ll fix Chainvas when I get brave enough to fire up my vm.

  • http://twitter.com/pepelsbey Вадим Макеев

    Very nice! But it would be better to remove fractions from time/progress values (30%) or keep it with zero (30.0%) because jumping percent sign hurts my eyes while I’m moving cursor over the graph.

    BTW, how many domains do you own? ;)

    • http://leaverou.me Lea Verou

      Done!

      I don’t own many domains. I only buy one when I make an app that allows sharing links. In that case, the link has to look good, doesn’t it? :)

  • http://twitter.com/Mantish Mantish

    Wow, this is awesome

  • http://twitter.com/check_ca Gildas

    It would certainly be smoother if there wasn’t huge repaints during animation (Use “Timeline” tool in Chrome debugger tools).

    • http://leaverou.me Lea Verou

      So those huge repaints only occur above 1330px wide resolution? Cause that margin is in a media query for that.

      • http://twitter.com/check_ca Gildas

        Yes it does not occur when the section is below the animation. Note that there’s the same issue with Firefox (the repaint is less “huge”). It can be tested by typing this code in the console (you must also set “dom.send_after_paint_to_content” option to true in about:config):
        addEventListener(“MozAfterPaint”, function(e) {for (var i = 0; i < e.clientRects.length; i++) { var rect = e.clientRects[i]; console.log(rect.left, rect.right, rect.top, rect.bottom);}, false);  

        BTW, what's wrong with "float: left" style ?

        • http://leaverou.me Lea Verou

          I want the library to accommodate all the space that’s available. If I recall correctly, float:left didn’t do that, it usually decides on a size quite liberally.
          Thanks a lot for the insight about repaints though, it’s a topic I’m not very knowledgable about. For example, I had no idea you need to set that option in about:config to use MozAfterPaint, I thought it worked out of the box. Nor did I know how to use the event object it returns. Very interesting stuff!

          I’ll have to look a bit more into this when I find some time.

  • Pingback: Major update to Chainvas: modularity, IE8 compat & more | Lea Verou

  • http://magazine.nuefolio.com Ramaraju Ramakanth

    Cool. Nicely Done…

  • http://thiagosf.net Thiago S.F.

    Awesome!!! Great job!

  • Ben

    Great tool!!

    However I’ve found a minor bug – at least in safari 5.1.1.Loading an curve from the Library to compare uses a default duration of 1.0 second instead of the duration selected with the slider. Once you move the slider it works fine.To replicate:  1) change the duration slider to anything other than 1 second (try ~5 seconds) 2) press [go] – notice they take the same duration. 3) click a different item in the library to compare 4) press [go] – notice the duration of the new item is 1 second vs ~5 seconds (or whatever you picked above) 5) change the duration slider again 6) press [go] – notice they take the same duration

    • Ben

      Ugh. formatting is screwy – dunno how to fix that, sorry.

    • http://leaverou.me Lea Verou

      Hi Ben,

      Thank for trying it out :)
      The library is supposed to store curves, not transitions. It was never meant to store the duration.

      Hope that helps. :)

  • Doesnot

    how about giving a credit to the original creator of the tool, on http://cubic-bezier.com/.

    • http://leaverou.me Lea Verou

      The original creator of the tool? Please, enlighten me.

      • Josh Beckwith

        It *couldn’t* be you! Haha.

  • Topi

    I don’t understand why http://cubic-bezier.com/#0,0,1,1 compared to the linear one is so different ?!

    • http://leaverou.me Lea Verou

      Huh? It looks exactly the same to me. Can you post a screenshot? Which browser are you using?

  • Yair Even Or

    in current Chome (v 15) the last value of the cubic-bezier cannot be greater than 1.

  • Pingback: Cubic Bezier Montserrat Agence de Communication

  • http://markjaquith.com/ Mark Jaquith

    It looks like that Webkit bug was fixed: https://bugs.webkit.org/show_bug.cgi?id=45761

  • Dawid

    Another “Lea Verou – making live easier” project :) Thank you!

  • Really Good

    Awesome, Wonderful, fantastic, …

  • Pingback: All About Cubic Bezier Curves & Transitions | Pro Blog Design

  • Pingback: All About Cubic Bezier Curves & Transitions | Articles in IT and more

  • Pingback: All About Cubic Bezier Curves & Transitions | WordPress Coders - Articles

  • Андрей Ситник

    Maybe it’s better to select easing from list of presets (another easings is used very rare) like http://easings.net?

  • ozergul

    awesome.

  • http://www.facebook.com/benny.neugebauer Benny Neugebauer

    Excellent tool. I can make good use of it to display some curves in my bachelor thesis! It would be even more awesome if could enter the numbers live in the
    cubic-bezier(x, x, x, x) header. Thank you so much!

  • Josh Beckwith

    Aw man! I want x-axis freedom, too! It works for me, but only in chrome.

  • http://lessy.me/ Lessy

    After played with it for a while I understand how cubic-bezier works. Thanks!

  • http://profiles.google.com/asakasinsky Василий Асакасинский

    Thank you, Lea!

  • Vitaliy B

    Cool! It was useful to me when I studied iOS animation media timing function.

  • Pingback: All About Cubic Bezier Curves & Transitions - Articles in IT and more | Articles in IT and more

  • Pingback: Global IT Solutions | All About Cubic Bezier Curves & Transitions - Global IT Solutions

  • Daneel

    Thanks for such a useful tool,

  • Pingback: All About Cubic Bezier Curves & Transitions | WarWebDev

  • Giannis Gpls

    Συγχαρητήρια…. Η διπλωματική μου περιέχει καμπύλες bezier και B-splines και με βοήθησε αρκετά αυτή η σελίδα να καταλάβω το πως λειτουργεί η καμπύλη.
    Νομίζω αξίζει η ψήφος μου για τα net awards!!
    Καλή επιτυχία!

    • http://lea.verou.me/ Lea Verou

      Ευχαριστώ για την ψήφο!

  • Alon

    Great job!
    Would be useful to change the numeric values manually at the header.

  • http://technoknol.blogspot.com/ TechnoKnol

    Awesome…

  • Pingback: All About Cubic Bezier Curves & Transitions - Andrew Good

  • Brian Brewder

    This is an awesome tool for understanding how cubic-bezier works and also for trying out different animations to get the one you are looking for. I had a lot of fun messing around with it (probably spent more time on it than I should have :) ). Thanks for creating this tool.

    I found a minor bug when I set one of the the draggable points to 1,1. Basically the draggable point goes under the stationary one and you can’t select it to move anymore. If you set the z-index of the draggable points to a higher value than the stationary points, it resolves this problem.

  • Pingback: All About Cubic Bezier Curves & Transitions | Web Design Articles From An Actual Living Web Professional