Custom ease() easing

[Itay Assouline]

Hello there!

so I'm making a keyframe less animation,

a very simple one.

just scaling in and out. (Well, for now. maybe it will be larger one day).

I already got the animation itself,

but i want different easing.

any idea?

thats the code

ease(time,inPoint,inPoint+1,[-100,-100],[0,0])+ ease(time,inPoint+1,inPoint+2,[100,100],[0,0]);

[Justin Taylor-Hyper Brew]

The built-in easings are linear, ease, easeIn, easeOut, however, you can make any easing you want. If you search for easing functions in JavaScript you'll see a bunch of examples, however, you'll need to convert these to be used in an AE expression context.

My recommendation would be to check out Flow​, it's got a pretty awesome expression feature that a lot of people don't know about. Instead of applying easing to keyframes, you can toggle on the expression feature and then the easing will be applied as an expression to your keyfames. And then you can go in and modify values as needed, and even make it work without keyframes if you want.

[zlovatt]

+1 to Flow's easing expressions; this was a major reason why Flow was created in the first place

We give you the 25 presets each as an easing function, as well as the ability to use your custom curve in expressions.

[Dani SdM]

Hi @zlovatt Flow rocks! As for the apply as expression feature. I believed the Flow magic went even further and added the selected ease to your existing expression. That's complicated, I know. I was just hoping 🙂
So what I have is a position animation with 2 keyframes. I want the seconde keyframe controlled by a slider so the final position of that animation can be edited. That's what I used D. Ebberts':
if(numkeys > 1{
t1 = key(1).time;
t2 = key(2).time;

v1 = 80;
v2 = 400 + thisComp.layer("CTRL").effect("offsetX")(1);

easeOut(time,t1,t2,v1,v2);

}else value

As you can see I was hoping to keep this expression going, but add, for example an Expo curve.

[Dan Ebberts]

It's not too tough to add your own exponential out ease function:

function expoOut(curT,t1,t2,val1,val2){
  if(curT <= t1)return val1;
  if(curT >= t2)return val2;
  dtEase = t2 - t1;
  dvEase = val2 - val1;
  tEase = (curT-t1)/dtEase;
  return val1 + dvEase*(1-Math.exp(-10*tEase));
}

if(numKeys > 1){
  t1 = key(1).time;
  t2 = key(2).time;

  v1 = 80;
  v2 = 400 + thisComp.layer("CTRL").effect("offsetX")(1);

  expoOut(time,t1,t2,v1,v2);

}else value

[Jaison33751329odwh]

Hello all,

I'm working on a similar map animation using Geolayers. I have 2 position keyframes that are driven by expressions. But I can't figure out how to get the proper ease keys applied. Ive tried the Flow apply to expressions, but that doesn't seem to work.

Here's my expression (Very untidy):

gridLayer = thisComp.layer("MARKER LOCATION")

gridPosition = gridLayer.transform.position;

gridPositionX = gridLayer.transform.position[0];

gridPositionY = gridLayer.transform.position[1];

markerLayer = thisComp.layer("MARKER").transform.position;

diffPosition = transform.position - markerLayer;

//Check if the current layer has keyframes

if(numKeys >= 2)

{

// Get the values of keyframes 1 and 2

keyframe1Value = key(1).value;

keyframe2Value = key(2).value;

newPosition = gridPosition + diffPosition

// Linearly interpolate between keyframes 1 and 2 based on time

interpolatedX = linear(time, key(1).time, key(2).time, keyframe1Value, newPosition);

//interpolatedY = linear(time, key(1).time, key(2).time, keyframe1Value[1], newPosition[1]);

key2Time = key(2).time

if(time==key2Time)

{

newPosition

}

else

{

//[interpolatedX, interpolatedY]

interpolatedX

}

}

Any  help would be appreciated!

@Dan Ebberts

@Justin Taylor-Hyper Brew 

[Dan Ebberts]

What defines the ease you want to use?

[Jaison33751329odwh]

Its an ease from Flow.

This is how its looking atm.

 

[Dan Ebberts]

That's the speed graph, right? What does the value graph look like? And will the resulting graph with the new KF values always have a similar shape, or might it be drastically different?

[Jaison33751329odwh]

Yes, that was the speed graph. 
I want the new KF's to have the same exact shape.

Here's the value graph.

 

[Dan Ebberts]

So you've already got the Flow expression applied, is that correct? If so, I'd think you might just need to modify the startValue and endValue variables before the call to customBezier(), but it's hard to know for sure without seeing it.

[Jaison33751329odwh]

Before the expressions, an ease from Flow was applied. 
After the expression, however, I can't seem to replicate that ease (as shown in the 1st pic). 
So I tried applying the ease to expression from Flow and set it to 'Append' to read after the expression (hope that's right!?) 

[Dan Ebberts]

Assuming that your expression does what you need (minus the ease) before you apply Flow, then I guess it would depend on how Flow incorporates your expression into its result. Have you tried posting a question on aescripts?

[Jaison33751329odwh]

I got it to work @Dan Ebberts , thanks heaps for your suggestion to apply the custom Bezier.

I took that route and ended up using cubic() and got it to work!

Thanks again for your input!