Setup & Rigs

Photo matching using string matching 
2020
2019
2020
// timeRemapping
var src = thisLayer.source;
var txt = thisComp.layer("file").text.sourceText.toLowerCase();
​
// loop match
for (i = 1; i < src.numLayers; i++) {
    if (src.layer(i).name.toLowerCase().match(txt)) {
        myLayer = src.layer(i);
        break;
    } else {
        9999 // catch error
    }
}
​
inP = myLayer.inPoint;
outP = myLayer.outPoint-framesToTime(0);
dur = outP - inP;
linear(time,inPoint,dur,inP,outP)
2019
//timeRemap
framesToTime(effect("frameSelect")("Slider"));
​
​
// Slidercontrol
myComp = thisLayer.source;
ext = ""//.png
txt = thisComp.layer("lastName").text.sourceText.toLowerCase();
​
// loop match
for (i = 1; i < myComp.numLayers; i++) {
    if (myComp.layer(i).name.toLowerCase().match(txt)) {
        i-1 // -1 as time starts from 0 ;
        break;
    } else {
        100 // catch error 
    }
}
Text layer as a check
t = timeToFrames(time);
t = clamp(t,1,index-1);
thisComp.layer(t+1).name;
Layer slider with responsive positioning
Parameters:
Layer can be aligned in x-axis with adjustable even space in-between 
For that to happen, the anchor points of the layers must be centered
This prevents inconsistent opacity for the layers on both sides
If a layer scale changes, the spacing should change accordingly
Create a control that just change the active "tile";
Tiling formula
(target.width/2−space)−(active.width/2)(target.width/2-space)-(active.width/2)(target.width/2−space)−(active.width/2)
One direction
Two Directions
One direction
//POSITION
​
// VARIABLES	
space = 0;
dir = 1; // 1 for tile right, -1 to tile left
axisX = 1; // 1 to turn on, 0 to turn off
axisY = 0; //1 to turn on, 0 to turn off
​
// SETUP
target = thisComp.layer(index + dir)
tpos = target.transform.position;
tscale = target.transform.scale[0] / 100;
tSrc = thisComp.layer(index + dir).sourceRectAtTime().width / 2 * tscale
tSrcY = thisComp.layer(index + dir).sourceRectAtTime().height / 2 * tscale
​
s = sourceRectAtTime();
activeWidth = s.width / 2 * transform.scale[0] / 100
activeHeight = s.height / 2 * transform.scale[0] / 100
​
​
// EXECUTION: Center position to left of target layer, offset the width, + spacing
tpos += [(activeWidth + tSrc + space) * axisX, (activeHeight + tSrcY + space) * axisY] * dir; 
​
​
// OPACITY
​
minOpacity = 0;
maxDist = thisComp.width/2;
​
v = transform.position[0] // Get x position
d = Math.abs(length(v, thisComp.width / 2)); // Get distance between layers
​
ease(d, 0, maxDist, 100, minOpacity)
Two Directions
// VARIABLE
space = thisComp.layer("CONTROL").effect("step")("Slider");
center = thisComp.layer("Center");
​
// SETUP
dir = -1; // Direction for Right 
if (index < center.index) {
    dir = 1;
} // Direction Left if below Center Layer
​
target = thisComp.layer(index + dir)
tpos = target.transform.position;
tscale = target.transform.scale[0] / 100;
tSrc = thisComp.layer(index + dir).sourceRectAtTime().width / 2 * tscale
​
s = sourceRectAtTime();
activeWidth = s.width / 2 * transform.scale[0] / 100
​
// EXECUTE
tpos += [tSrc * dir, 0]; // // Center position to left of target layer 
tpos += [activeWidth * dir, 0] //// Offset the width 
tpos += [space * dir, 0] //add spacing
​
Lower-thirds
2-liner with conditional sizing (left-aligned text)
// null layer "controls"
    // 1. Create 2 layer controls and select text layers;
    // 2. Create 3 point controls: "heightWidth","heightWidthWithPad", "padding"
​
​
// "heightWidth" point control expression
t = effect("Layer Control")("Layer").sourceRectAtTime();
t2 = effect("Layer Control 2")("Layer").sourceRectAtTime(time - 1);
y = 50; // height of textbox 
​
t.width < t2.width ? [t2.width, y] : [t.width, y]
​
// "heightWidthWithPad" point control expression
effect("heightWidth")("Point") + effect("padding")("Point")
​
​
// Rectangle shape layer "textbox"
    // SIZE 
    thisComp.layer("controls").effect("heightWidthWithPad")("Point")
​
    // LAYER ANCHOR POINT
    s = sourceRectAtTime();
    [s.left,s.top] // left align
    [s.width/2,0]; // right align,right align your text layers in the paragraph panel & reposition everything as needed.
​
​
// Line 1 text justification
//Put a "Tracking" parameter text animator onto your text layer with this expression
padding = thisComp.layer("controls").effect("padding")("Point")[0];
numChar = text.sourceText.length;
padding/numChar;
​
// This will justify your line 1 to the textbox, provided that line 2 is shorter
​
After Effects - Previous
Expression Wizardry 🧙🏼‍♂️
Next - After Effects
Cookbook
Last updated 9 months ago