[Alex Printz]

I suggest making for each gui element your before_closed, open, and after_closed values as three keys for each property you want to animate, and sticking a piece of code onto them like this:


controller = thisComp.layer("NULL").position[1];
targetValue = e.g., 200;
range = e.g.,100;

if( controller < targetValue)
ease (controller, targetValue, targetValue-range, key(2).value, key(1).value);
else
ease (controller, targetValue, targetValue+range, key(2).value, key(3).value);

this tells your different expressions to reference your controller (“NULL”), look at it’s Y-position and when it’s at a targetValue to be ‘open’ (@ property key 2), and if it’s within a range away from that target value, to animate into a closed state (key 1 and 3).

You’ll have to figure out what you all want to do from there.

Alex Printz
Mograph Designer

[Alex Printz]

Seconding Dan’s comment, you’re going to need to figure out how to check all the necessary layers, their heights, and then their positions. Unfortunately expressions run one at a time, so they are going to have to do all the positions at once each time… or

Something I’ve done before is make a guide text layer and then inside the sourceText build one large expression to check all necessary layers and then output all of the necessary elements of data all at once as a JSON file. Then all you need to do is build smaller JSON parse expressions inside the layer positions that look at the text, compare a string to their name, and then grab that output of data.

Something to consider; more work upfront, but faster on the backside.

Alex Printz
Mograph Designer

[Alex Printz]

isn’t timecode technically a string? You would need a function timecodeToTime(t), which after effects doesn’t have, to get it to be comparable.

To build the function you you would need to parse out the separate elements of the timecode and combine them appropriately, e.g.:

t = 00:00:02:00;

var f = 0;
for(i=0; i<4; i++){
d = t.split(“:”)[i];
try{d = d.split(“:”)[0]}catch(e){};
f += parseInt(d);
if(i<2) f*=60;
if(i==2)f*=(1/thisComp.frameDuration);
} framesToTime(f)

Alex Printz
Mograph Designer

[Alex Printz]

Yeah sure;

first I changed the notation of the expression into after effects (I think I mostly removed the .Math) and placed it above the final declaration of the code. That’s a new feature requirement of the new javascript engine (vs. old extendScript).

I then refamilarized myself with the penner functions about how they are written; they require the duration and the change in values, rather than the input/outputs like after effects’ built-in interpolation functions.

So I simply created the t variable (current time, minus the initial time, so that the transition will start at 0) and figured out the duration (end time minus the start time).

Then it was just a matter of feeding the correct inputs into the function using the notation the function called for; I also had to figure out c for each dimensions (x and y) separately since they’re being calculated differently, and since we need to know the change rather than the final value, subtracted the start value from both of those separately.

Finally, recombined x and y into an array.

Alex Printz
Mograph Designer

[Alex Printz]

I think it should look like this:

/* 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 startVal = 100;
var xendVal = 450;
var yendVal = 800;
var startDur = 1;
var endDur = 1.8;

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

y = easeInOutExpo(t,startVal, yendVal - startVal, d);
x = easeInOutExpo (t,startVal, xendVal - startVal, d);

[x,y];

Alex Printz
Mograph Designer

[Alex Printz]

okay, this is an unusual way to do this, but it should work with some restrictions (so long as the two different keys are not the same X-size). The only way to tweak the velocity of keys is on the actual property (scale), so I am telling it to look at how it changes from the first into the 2nd key for the x-property, but instead of acting as that value to instead grab the other rectangle’s value. Hope it works for you:

linear(value[0], key(1).value[0], key(2).value[0], key(1).value, content(“Rectangle 1”).content(“Rectangle Path”).size);

Alex Printz
Mograph Designer

[Alex Printz]

try this, should work for both position and scale:

[effect(“Slider”)(1),value[1],value[2]]

Alex Printz
Mograph Designer

[Alex Printz]

try this:

linear( time, key(1).time, key(2).time, key(1).value, content(“Rectangle 1”).content(“Rectangle Path”).size);

Alex Printz
Mograph Designer

[Alex Printz]

Dan is right it’s the toWorld;

toWorld is a calculation, not a property, so “pos” it cannot check it’s value at a different time since it has no ‘time’, it’s just a number.

You must get your correct time calculated you want to check prior to a world position conversion, and then put it as a comma after your position to check, eg:

target.toWorld(target.anchorPoint,targetTime)

Try this:

function getDistanceTraveled(){
var T = thisLayer;
var sFrame = framesToTime(1,1/thisComp.frameDuration);
var tSample = Math.ceil(effect("Time Sample (Frames)")("Slider"));

var dist = 0;
for(i = 0; i < tSample; i++){
let tOne = time - (sFrame * i);

if (tOne < 0) {timeOne = 0;};

let tTwo = tOne - sFrame;

if (tTwo < 0) {tTwo = 0;};

var posOne = thisLayer.toWorld(thisLayer.anchorPoint,tOne);
var posTwo = thisLayer.toWorld(thisLayer.anchorPoint,tTwo)var
let xDist = Math.abs( posOne[0] - posTwo[0var];
let yDist = Math.abs( posOne[1] - posTwo[1] );
dist += Math.sqrt( Math.pow(xDist,2) + Math.pow(xDist,2) );
};

return dist;
};

var x = getDistanceTraveled();
[x,0];

Alex Printz
Mograph Designer

[Alex Printz]

I don’t think you could do it easily; sin/cos are not native properties to bezier curves. To combine them you need to add additional vector points to your splines and then adjust their positions based on that.

You would need to define a much larger amount of points along the spline, calculate the total length of the spline between the points, calculate out a period for the sin wave relative to the total length of the spline, check the point positions along the spline, calculate the sin value relative to the point on the spline the period and the animated time, multiply that by an intensity vector, and then factor that into your normal calculation plus the position of the spline points.

You could also try to figure out how to calculate the controller spline and it’s in/out tangents to do this, but it’s too much to figure out off the top of my head.

Alex Printz
Mograph Designer