Convert CSS cubic bezier easing to Javascript

Question

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);
}

Needy

Answer 1

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/

Aviary

Thanks for the rewrite. Always horrible when they make it specific (for node). However does not work for negative values, but I guess I can convert after. – Brittaniebrittany

Is there a cdn for this? – Kloof

Answer 2

Like so:

element = document.getElementById('targetElement');
element.style.transitionTimingFunction = 'cubic-bezier(0.175, 0.885, 0.32, 1.275)';

Fanchan

this does not answer the OP's original question on converting css cubic bezier easing to javascript, not using css cubic bezier – Anastasia