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

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

• javascript
• tween
• easing

2 Answers 2

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

You could just select desired parameters from http://cubic-bezier. 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/0x51ew2L/

Like so:

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