thisLayer.toComp([0,0])+ thisProperty.value (no rotation)

V2
thisLayer.toComp([value[0], thisLayer.sourceRectAtTime().top + value[1]]);

thisLayer.toComp([value[0], thisLayer.sourceRectAtTime().top + thisLayer.sourceRectAtTime().height + value[1]]);

loopIn("cycle") will repeat your animation before the keyframes in your timeline. The animation will end at the last keyframe.

loopOut("cycle") will repeat your animation after the keyframes in your timeline. The animation will end with your composition.

loopOut("continue") will take the last two keyframes of your animation, and continue that stroke indefinitely.

loopOut("pingpong") will carry your animation forwards and backward through the keyframed positions.

loopOut("offset") will bring the entire animation along. The animation will repeat itself starting from the last keyframed point.

Loop Path animation

valueAtTime(time % key(numKeys).time)

//////////

if (numKeys > 1 && time > key(numKeys).time){

var sTime = key(1).time;

var eTime = key(numKeys).time;

var loopEvery = eTime - sTime;

var delta = time - eTime;

var finalTime = sTime + (delta%loopEvery);

valueAtTime(finalTime);

}else {

value

}

//////////////

function loopOutPath(){

if (numKeys > 1 && time > key(numKeys).time){

var sTime = key(1).time;

var eTime = key(numKeys).time;

var loopEvery = eTime - sTime;

var delta = time - eTime;

var finalTime = sTime + (delta%loopEvery);

return valueAtTime(finalTime);

}else {

return value

}

}

loopOutPath();

loopOut(type="cycle",numKeyframes=0)

Squash and Stretch

This exercise demonstrates how you can use an expression to apply "squash and stretch" to an object. For this experiment, I imported two Illustrator graphics. I moved their anchor points to the bottom so that the stretching occurs relative to the "floor" of the comp. I keyframed the falling action and split each layer at the point it reaches the floor. I added the following expression to the scale property of each of the stationary pieces:

maxDev = 13; // max deviation in pixels

spd = 30; //speed of oscillation

decay = 1.0; //how fast it slows down

t = time - inPoint;

x = scale[0] + maxDev*Math.sin(spd*t)/Math.exp(decay*t);

y = scale[0]*scale[1]/x;

[x,y]

The formula for "x" is just applying a decaying sine wave to the original scale. "y" is calculated to keep the area of the layer constant.

Adjust the deviation, speed and decay parameters as needed.

Using the value of an existing Text Layer

All we need to do is to remap time to the number of letters in our text. Apply the following expression to a Text Layer "Source Text" property

// properties you can change

var startAt = 0;

var endAt = 9;

// trim the text

var maxLetters = Math.floor(linear(time, startAt, endAt, 0, value.length)); // number

var result = value.substring(0, maxLetters); // trim

result

——————-

From global time to layer time

The effects seem to work just fine. However. the range we set with startAt and endAt is referring to the global comp time and ignores the layer start time. If the layer starts / ends outside the range we set in the expression head, you might not see the effect because it's taking place when the layer is not visible.

To fix this we can use "inPoint" in our expression to make up for the difference, like so:

// properties you can change

var startAt = 0;

var endAt = 10;

// trim the text

var maxLetters = Math.floor(linear(time, inPoint + startAt, inPoint + endAt, 0, value.length)); // number

var result = value.substring(0, maxLetters); // trim

result

inPoint is the time in seconds in which the layers start in the timeline. Adding it to our range will make the range relative to the layer itself.

"valueAtTime()" grabs the value of a property at a specific time, unlike "value" which grabs the value of a property as it is now.

You specify time as a number inside the parenthesis.

valueAtTime(0)

⌗Creating a delay between layers

In this example, there is no need to parent the layer itself to the main one. We're going to use an expression to grab its Position value.

However, instead of using "value", we're gonna use "valueAtTime()", and instead of specifying a time in seconds, we're gonna use the current time and subtract the amount of delay we want (in seconds).

var delay = 0.2; // seconds

var parentPosition = // parent to the other layer's Position property

parentPosition.valueAtTime(time - delay)

For the "parentPosition" variable value, use the Pickwhip tool to select the parent's Position property.

(https://www.goodboy.ninja/expressionscheatsheet#Creatingadelaybetweenlayers)

This is a very simple expression that is used to tie a camera's focal distance to the position of an object (the ghost in this case). As the ghost moves towards and away from the camera, the other object in the comp goes in and out of focus in a depth-of-field affect.

Apply the following expression to the camera's Focus Distance property:

L = thisComp.layer("ghost.ai");

P1 = L.position - position;

P2 = toWorldVec([0,0,1]);

dot(P1,P2);

Substitute your layer's name for "ghost.ai"

The expression includes a little vector math (dot product) to account for the fact that the camera focuses on a plane and the layer that you use to determine the focal distance might not be directly in front of the camera.

Waves

The sine wave function is a friend of yours that gives you back a number between -1 and 1.

Math.sin() // a number between -1 and 1

The exact results depends on you. Unfortunately, it expects you to give it a number between 0 and 6.2831.

Wait a minute. That's very specific. 6.2831?

Well it turns out 6.2831 is exactly 2PI, which is the point in which the sine wave results in exactly one lap

————————-

With a single line of code, we got your layer to rotate 45 degrees back and forth every second. How cool is that?

We are multiplying 2PI with the current time.

When the time is 0 seconds, we are 0 laps into our sine wave. When time is 1 second, we are 1 exactly one lap into our sine wave. And this goes on forever.

This helped us get a number that fluctuates between 0 and 1 repeatedly. We then multiplied it by 45 and got a number between -45 and 45. That's awesome!

The Rotation property expects a number, and a number between -45 and 45 is a number, so we did a good job on that!

For our final expression, we can do something like this:

45 * Math.sin(Math.PI * 2 * time) // gets a number between 0 and 1, then multiplies it by 45 degrees;

————————————-

var loopDuration = 5; // every 5 seconds, or however many seconds you decide

var degrees = 45; // or however many degrees you want

degrees * Math.sin( Math.PI * 2 * time / loopDuration);

The trick to achieve the South-Park animation style is to divide a number, round it and then multiply it back the same amount.

This behaves like snapping something to a grid. If we divide and multiply by 20, the spacing between the grid cells will be 20 pixels.

⌗Snapping Position (or other 2 dimensional properties)

// properties you can edit

var stepSize = 20; // Will stick to 20 pixels incremenets

// run

var x = Math.round(value[0] / stepSize) * stepSize;

var y = Math.round(value[1] / stepSize) * stepSize;

[x, y];

Snapping Rotation (or other 1 dimensional properties)

// properties you can edit

var stepSize = 20;

// run

var result = Math.round(value / stepSize) * stepSize;

result;

—————-

(.)- Creating a snap function that can be applied to both kinds of properties.

function snap(theValue, theStepSize) {

if (Array.isArray(theValue)) {

// if the value is an array (like a Position value) apply to each dimension

var result = [];

for (var i=0; i<theValue.length; i++) {

result.push(Math.round(theValue[i] / theStepSize) * theStepSize);

}

return result

}

// otherwise, apply to the value

return Math.round(theValue / theStepSize) * theStepSize;

};

snap(value, 20);

Moving in a Circle

Apply this code to a Position property:

// properties you can easily change

var loopDuration = 5;

var circleRadius = 25;

var flip = false;

// move

var flipper = flip ? 1 : -1;

var waveLogic = time * 2 * Math.PI / loopDuration * flipper;

var x = Math.sin(waveLogic) * circleRadius;

var y = Math.cos(waveLogic) * circleRadius;

value + [x,y];

Inverse Kinematics

This is a pair of rotation expressions you can use to implement inverse kinematics (IK) in After Effects. This code is based on expressions developed by Brian Maffitt for his wonderful "Total Training for After Effects" DVD series. I've modified them somewhat to allow anchor points to be inset from the edge of the objects.

IK allows you to position a chain of objects based on the movement of the object at the end of the chain. For example, moving a hand would cause the upper and lower arm components to rotate at their joints to accomodate the hand's movement.

Here's the code for the rotation of the upper arm:

A = toWorld(anchorPoint);

L = thisComp.layer("lowerArm");

B = L.toWorld(L.anchorPoint);

L = thisComp.layer("Null 1");

C = L.toWorld(L.anchorPoint);

L = thisComp.layer("hand");

H = L.toWorld(L.anchorPoint);

a = length(A,B);

b = length(B,C);

c = length(H,A);

x = (a*a - b*b + c*c)/(2*c);

beta = Math.acos(clamp(x/a,-1,1));

D = H - A;

delta = Math.atan2(D[1],D[0]);

radiansToDegrees(delta - beta);

And here's the code for the rotation of the lower arm:

B = toWorld(anchorPoint);

L = thisComp.layer("upperArm");

A = L.toWorld(L.anchorPoint);

L = thisComp.layer("Null 1");

C = L.toWorld(L.anchorPoint);

L = thisComp.layer("hand");

H = L.toWorld(L.anchorPoint);

a = length(A,B);

b = length(B,C);

c = length(H,A);

x = (a*a - b*b + c*c)/(2*c);

y = c - x;

alpha = Math.acos(clamp(y/b,-1,1));

beta = Math.acos(clamp(x/a,-1,1));

radiansToDegrees(alpha + beta);

The math behind these is somewhat complex, but if you know trig it's kind of fun to figure out how it works.

Here's the way you set this up. First, import the pieces for your IK chain (note that if you need to scale the pieces you should do that first in another application, because it will screw up the angle calculations if you do it in your comp). Also note that these expressions assume that your pieces start out horizontal. If they start out vertical, you will need to adjust the upper arm expression by subtracting 90 degrees from the result, by changing the last line to this:

radiansToDegrees(delta - beta) - 90;

Next you need to move the anchor points to the joints (move the upper arm's anchor point to the sholder, the lower arm's to the elbow and the hand's to the wrist). Next you align the pieces to form your chain. Then create a null layer ("Null 1" in this example) and position it so its anchor point is at the same place as the hand's anchor point. Now make the upper arm the parent of the lower arm, and the lower arm the parent of the null. Note that the hand has no parent. Now apply the expressions for rotation.

If you've done everything right, you should be able to move the hand around in the comp and the arm will follow.

To get the mirror image solution (so the the arm pieces bend the other way) you would change the last line of the upper arm expression to:

radiansToDegrees(delta + beta);

and change the last line of the lower arm expression to:

-radiansToDegrees(alpha + beta);

Code can be unsafe. One of the easiest ways to screw up with code is what's called an infinite loop.

Apply the following expression to any property in order to crash After-Effects:

while(true){}

while() in JavaScript lets you execute a block of code repeatedly as long as the condition inside the parenthesis is true.

This means that it's your responsibility to break out of the loop. If we don't, like in the example above, our code will try to run forever and After-Effects will freeze as a result.

Another way to do that is with a for loop:

for (var i=0; i<Infinity; i++) {}

Using a for loop we can run a code repeatedly until a condition has been met. The condition we set is i < Infinity, which as you can imagine, will never be met.

‍

⌗Sabotaging somebody's project file

Here in the Good Boy Ninja project, everything is about peace and love, but let's say there is someone you war and hate...

You could make After-Effects crash, but only when the timeline is set to a specific amount of time. Something like:

if (time > 10) {

while(true){

}

} else {

value

}

Now every time they will scroll past the 10 seconds mark, their project will crash.

Automatic Fade

The automatic fade expression is useful when you don’t want to bother a create keyframes for a fade animation.

transition = 20;

if (marker.numKeys<2){

tSecs = transition / ( 1 / thisComp.frameDuration);

linear(time, inPoint, inPoint + tSecs, 0, 100)

- linear(time, outPoint - tSecs, outPoint, 0, 100)

}else{

linear(time, inPoint, marker.key(1).time, 0, 100)

- linear(time, marker.key(2).time, outPoint, 0, 100)

}

Lock a layer's position without locking the layer.

Add an expression to position and enter this:

[160,120] aka[Value,value]

Works with other values too. Eg Transparency