Penner easing expressions with layer slide

[Olly Starkey]

Hi all

I’d like to find a way to slide a layer into position based on it’s in point. Currently I am using this expression.

/* Legend:
t: current time
b: beginning value
c: change In value
d: duration
*/

function easeInOutExpo (t, b, c, d) {
t /= d/2;
if (t < 1) return c/2 * Math.pow( 2, 10 * (t – 1) ) + b;
t–;
return c/2 * ( -Math.pow( 2, -10 * t) + 2 ) + b;
};

var xstartVal = 500;
var ystartVal = 500
var xendVal = 500;
var yendVal = 800;
var startDur = 0;
var endDur = 1.8;

t = time – startDur;
d = endDur – startDur;

y = easeInOutExpo (t,ystartVal, yendVal – ystartVal, d);
x = easeInOutExpo (t,xstartVal, xendVal – xstartVal, d);

[x,y];

I’d like to be able to alter the ease velocity and looking a Robert Penner’s site I have tried to insert the easeOutQuint function but it failed spectacularly.

This was Penner’s easeOutQuint expression

public static float easeInOut (float t,float b , float c, float d) {
if ((t/=d/2) < 1) return c/2*t*t*t*t*t + b;
return c/2*((t-=2)*t*t*t*t + 2) + b;
}

But it would be useful to be able to use any of his expressions.

Is there an easy way to do it?

[Dan Ebberts]

I think this works:


function easeInOut (t,b,c,d) {
if (t <= 0) return b;
if (t >= d) return b + c;
if ((t/=d/2) < 1) return c/2*t*t*t*t*t + b;
return c/2*((t-=2)*t*t*t*t + 2) + b;
}

var xstartVal = 500;
var ystartVal = 500
var xendVal = 500;
var yendVal = 800;
var startDur = 0;
var endDur = 1.8;

t = time - startDur;
d = endDur - startDur;

y = easeInOut (t,ystartVal, yendVal - ystartVal, d);
x = easeInOut (t,xstartVal, xendVal - xstartVal, d);

[x,y];


Dan

[Olly Starkey]

That works a treat, thanks so much Dan

[Olly Starkey]

Hey Dan

Just playing around with this one, is there a way to start the animation based on the layers inPoint?

Currently it starts animating at frame 0

Thanks

[Dan Ebberts]

I haven’t tested it, but I think all you’d have to do is change this:

t = time – startDur;

to this:

t = time – (startDur + inPoint);

Dan

[Olly Starkey]

Hey Dan

That works perfectly. Thanks so much.

Olly

[Andrew Sherman]

Dan, I’m a long-time beneficiary of your wisdom on these forums, so just wanted to say thank you, and I’m also a user of some of your paid scripts on aescripts.

I’m trying to get this expression to work but I’m getting a syntax error (I think it’s the t = time line). Do you know how this might be resolved? I’m using latest AE CC.

I also wanted to know how I might use a different easing, like one of the other Penner easings (expo or bounce etc). Do I just change the calculation in the function with the relevant math?

// Penner easeInOutExpo

function easeInOut (t,b,c,d) {

if (t <= 0) return b;

if (t >= d) return b + c;

if ((t/=d/2) < 1) return c/2*t*t*t*t*t + b;

return c/2*((t-=2)*t*t*t*t + 2) + b;

}

var xstartVal = 500;

var ystartVal = 500;

var xendVal = 500;

var yendVal = 800;

var startDur = 0;

var endDur = 1.8;

t = time – (startDur + inPoint);

d = endDur – startDur;

y = easeInOut (t,ystartVal, yendVal – ystartVal, d);

x = easeInOut (t,xstartVal, xendVal – xstartVal, d);

[x,y];

[Dan Ebberts]

Andrew,

When code gets pasted into this forum, the minus signs can get converted to some other character, which breaks the expression. Try this version:

// Penner easeInOutExpo
function easeInOut (t,b,c,d) {
if (t <= 0) return b;
if (t >= d) return b + c;
if ((t/=d/2) < 1) return c/2*t*t*t*t*t + b;
return c/2*((t-=2)*t*t*t*t + 2) + b;
}
var xstartVal = 500;
var ystartVal = 500;
var xendVal = 500;
var yendVal = 800;
var startDur = 0;
var endDur = 1.8;
t = time - (startDur + inPoint);
d = endDur - startDur;
y = easeInOut (t,ystartVal, yendVal - ystartVal, d);
x = easeInOut (t,xstartVal, xendVal - xstartVal, d);
[x,y];

If you want a different ease, just change the code in the function (and the two references to the function if you change the name of the function).

[Andrew Sherman]

Fantastic, thank you so much Dan