Keyframe-less Position animation. Trying to use multiple Interpolation expressions in one property

[Stefan Walz]

Hi all, i'm not the most familiar with expressions, but am attempting to make a simple, animated lower-thirds title MOGRT and have run into an issue.

I have two text ("TITLE" and "SUB-TITLE") elements that are placed over a shape layer.  

I want my animation to have the shape layer extend with the width of the text as it's revealed and i've made an if/else expression to have the shape layer automatically scale with the width of the widest text element.  

The issue i'm running into is it appears to only allow me to use one interpolation

ease(t, tMin, tMax, value1, value2)

to have the shape layer animate in, but not a second one to close out the animation.

Here is the expression for my shape layer:

var TextWidth;
if(thisComp.layer("TITLE").sourceRectAtTime().width>thisComp.layer("SUB-TITLE").sourceRectAtTime().width) TextWidth=thisComp.layer("TITLE").sourceRectAtTime().width
else TextWidth=thisComp.layer("SUB-TITLE").sourceRectAtTime().width;
var BoxWidth;
if(TextWidth<1) BoxWidth=-70
	else BoxWidth=TextWidth;
var xBegin=134;
var y=134;
var Zing = effect("\"Zing\" Slider Control")("Slider")
ease(timeToFrames(t = time + thisComp.displayStartTime, fps = 29.97), 8, 17, [xBegin,y], [xBegin+Zing+BoxWidth,y]);

Ideally, I would want to have a second interpolation that looks like this, right after the first (ease).

ease(timeToFrames(t = time + thisComp.displayStartTime, fps = 29.97), 147, 156, [xBegin+Zing+BoxWidth,y], [xBegin,y]);

However, everytime I have more than 1 interpolation, the animation goes wonky and seems to ignore the first ease.

I attached a gif showcasing what I want the animation to look like (acheived though keyframes for demonstation) as well as the error that having two interpolation expressions appears to cause.  

Any thoughts on how I can achieve this with or withoute interpolation?

[Dan Ebberts]

The general structure to have different in and out eases is to use an if/else based on time, probably structured something like this:

if (timeToFrames(time) < 17)  // or, it could be half way between end-of-in and start-of-out
  ease(// in ease parameters go here)
else
  ease(// out ease parameters go here);

[Rick Gerard · Accepted solution]

I would suggest that you set your ease (or linear) interpolation based on layer in-point and/or layer out-point and add them together.

For example:

t = time - thisLayer.inPoint;
tMin = 0;
tMax = .5; // half second
Mov1 = easeIn(t, tMin, tMax, 0, 100);

t2 = t - 1.5; // start of second move
Mov2 = easeOut(t2, 0, .5, 0, 200);

totMove = Mov1 + Mov2; //Total movement

[value[0] + totMove, value[1]]

This will increase the value[0] by 100 in the first half second then add another 200 starting at one-and-a-half seconds and taking another half-second to complete. You could keep going based on layer out point and then subtract values from the current value so you end up with a double starting transition and a double ending transition. You would have to set protected areas for start and end that were long enough to cover the transitions and you could tie an expression like this to any property including scale, rotation, position. Basically any value.

If you had multiple shapes on a single shape layer you could even use this approach to control anything you can animate on a shape.

I don't have time to try your expression, but the idea is to set up two interpolated moves and add them together. You could then add them to any current value. 

[Stefan Walz]

Thank you for the excellent reply and expression comments.  This worked like a charm and could easily be applied to numerous use cases.  Thank you for the lesson!

[OussK]

why you don't use some tools that can help you, try https://www.danim.com/danim-box-free-after-effects-script 

[Stefan Walz]

This looks like a great resource, i'll definately take a look into it for future needs. Thanks!