CSS3 transition-timing-function as javascript function

Question

I need to create a Javascript-Fallback for CSS3-Animations and try to make it as close as possible to the CSS-Version. In CSS3, there are 4 predefined easing-functions:

ease: cubic-bezier(0.25, 0.1, 0.25, 1)
ease-in: cubic-bezier(0.42, 0, 1, 1)
ease-out: cubic-bezier(0, 0, 0.58, 1)
ease-in-out: cubic-bezier(0.42, 0, 0.58, 1)

Does anybody know an exact algorythmical equivalent to those easings, that could used in a Javascript function? I know there are alot of easings like Sine, Quad, Expo etc. (see http://easings.net/), but they all seem to differ.

thomasfuchs · Accepted Answer · 2016-05-04 20:45:17Z

The Scripty2 repository has a direct port of the C WebKit implementation to JavaScript, you can find the port here: https://github.com/madrobby/scripty2/blob/master/src/effects/transitions/cubic-bezier.js, but this is the central function (no dependencies).

function CubicBezierAtTime(t,p1x,p1y,p2x,p2y,duration) {
var ax=0,bx=0,cx=0,ay=0,by=0,cy=0;
function sampleCurveX(t) {return ((ax*t+bx)*t+cx)*t;};
function sampleCurveY(t) {return ((ay*t+by)*t+cy)*t;};
function sampleCurveDerivativeX(t) {return (3.0*ax*t+2.0*bx)*t+cx;};
function solveEpsilon(duration) {return 1.0/(200.0*duration);};
function solve(x,epsilon) {return sampleCurveY(solveCurveX(x,epsilon));};
function fabs(n) {if(n>=0) {return n;}else {return 0-n;}};
function solveCurveX(x,epsilon) {
  var t0,t1,t2,x2,d2,i;
  for(t2=x, i=0; i<8; i++) {x2=sampleCurveX(t2)-x; if(fabs(x2)<epsilon) {return t2;} d2=sampleCurveDerivativeX(t2); if(fabs(d2)<1e-6) {break;} t2=t2-x2/d2;}
  t0=0.0; t1=1.0; t2=x; if(t2<t0) {return t0;} if(t2>t1) {return t1;}
  while(t0<t1) {x2=sampleCurveX(t2); if(fabs(x2-x)<epsilon) {return t2;} if(x>x2) {t0=t2;}else {t1=t2;} t2=(t1-t0)*.5+t0;}
  return t2; // Failure.
};
cx=3.0*p1x; bx=3.0*(p2x-p1x)-cx; ax=1.0-cx-bx; cy=3.0*p1y; by=3.0*(p2y-p1y)-cy; ay=1.0-cy-by;
return solve(t, solveEpsilon(duration));
}

scorbaPlex · Accepted Answer · 2013-04-06 00:32:20Z

0

Geometrically equivalent? As in a curve traced with the points given in the webkit easing examples you supplied is equivalent to one that would be traced by some JS function?

Here's a way to define your own Pn for a cubic bezier easing.

An explanation: http://st-on-it.blogspot.com/2011/05/calculating-cubic-bezier-function.html

There's a git linked by the the author of the article which I can't ref b/c I don't have the rep, but ignore it. It's a hog.

Buuut: Same math, better event loop management, and way more recent commits than the above script, using jquery.easing: https://github.com/rdallasgray/bez

edited Apr 6, 2013 at 0:32

answered Mar 8, 2013 at 13:04

scorbaPlex

263 bronze badges

Comments

agiopnl · Accepted Answer · 2022-05-26 22:27:45Z

0

This is a simple version of ease out:

function lazyEase(now, end, speed) {
    return now + (end - now) / speed;
}
let x = 200
let nx = 900
function loop() {
    x = lazyEase(x,nx,30)
    update()
},

answered May 26, 2022 at 22:27

agiopnl

1,3722 gold badges12 silver badges21 bronze badges

Collectives™ on Stack Overflow

CSS3 transition-timing-function as javascript function

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related