Penner easing expressions with layer slide

[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

[Ronan De lacy]

Hi Dan,

Thanks for your explanations here. It’s starting to make things a little clear when trying ut use Penner easing in expressions. One question, however.

I have it working with easeInOutExpo, but when I switch out the function to another Penner ease, either the scale of the object increases 100x(ish) or the animation loops.

Any idea where I’m going wrong?

Here’s my expression as it stands, working with easeInOutExpo.

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;
};
Out=thisComp.layer("Controls").effect("Resolve By")("Slider"); //When should the animatiob be complete
Dur=thisComp.layer("Controls").effect("End Resolve Duration")("Slider"); //How long should the animtion be
x1 = 0;
x2 = 24;
t = time- Out+Dur;
d = Dur;
x=transform.scale[0]+easeInOutExpo(t,x1, x2 - x1, d);
y=transform.scale[1]+easeInOutExpo(t,x1, x2 - x1, d);
[x,y]

And this one, for example, just loops continuously

function easeInOutSine (t, b, c, d) {
    return -c / 2 * (Math.cos(Math.PI * t / d) - 1) + b;
}
Out=thisComp.layer("Controls").effect("Resolve By")("Slider");//When should the animatiob be complete
Dur=thisComp.layer("Controls").effect("End Resolve Duration")("Slider");//How long should the animtion be
x1 = 0;
x2 = 24;
t = time- Out+Dur;
d = Dur;
x=transform.scale[0]+easeInOutSine(t,x1, x2 - x1, d);
y=transform.scale[1]+easeInOutSine(t,x1, x2 - x1, d);
[x,y]

[Yoan Boisjoli]

Hey all,

I came across this thread while digging into Penner easing issues in AE a while back, and it brought me back. I hit a lot of the same walls, especially trying to get easing like easeInOutExpo or easeOutQuint to behave cleanly with time offsets and user controls in MOGRTs.

I was so fed up that I built a tool to solve it. It lets you apply Penner easings to any property in After Effects, without using keyframes. It auto-detects the property, adds a control layer, and uses expressions under the hood so everything stays editable.

If you’re still dealing with these types of easing headaches, this might help:

https://aescripts.com/keyless/

Just launched it recently and would love any feedback from folks who’ve already been down this rabbit hole.