Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Convert CSS cubic bezier easing to Javascript

I'm looking for a way to generate easing functions for my tweens, I need them in Javascript function format, with the standard t, b, c, d parameters.

I've found a great tool to generate CSS easing: http://cubic-bezier.com/ but the output is useless to me.

  • Is there a way to convert this format to a Javascript easing function?
  • Are there any better tools to directly build Javascript easing functions?

The desired format is something like:

function(t, b, c, d){
    var ts = (t /= d) * t;
    var tc = ts * t;
    return b+c*(4.257575757575761*tc*ts + -7.9545454545454595*ts*ts + 0.6818181818181834*tc + 4.46969696969697*ts + -0.4545454545454546*t);
}
like image 575
Drahcir Avatar asked Apr 10 '15 08:04

Drahcir


1 Answers

There is library for Bezier Curve based easing in JavaScript https://github.com/gre/bezier-easing

You could just select desired parameters from http://cubic-bezier.com and pass them to function BezierEasing. For example:

BezierEasing(0.25, 0.1, 0.0, 1.0)

Here is a example from documentation:

https://jsfiddle.net/0x51ew2L/

like image 68
Nikita. A. Avatar answered Oct 18 '22 02:10

Nikita. A.