Text Expression Question

[Kalleheikki Kannisto]

What an expression selector is: https://lesterbanks.com/2016/09/demystifying-expression-selectors/

The code interpreted:

freq = 2; // frequency, i.e. how many times the “bounce” happens during its duration
decay = 6; // how fast the effect decays
duration = 0.12; // how long does the animation last, in seconds
retard = textIndex*thisComp.frameDuration*1; // a delay: each letter is delayed by one frame. TextIndex is the location of the letter counted from start of text
t = time – (inPoint + retard); // the individual animation “time” value for each letter
startVal = [100,100,100];endVal = [0,0,0]; // how much to animate in the beginning and the end (100 % to 0%)
if (t < duration){ // if we’re inside the animation duration then…
linear(t,0,duration,startVal,endVal); // remap individual letter animation time between start and end value
}else{ // if not, then
amp = (endVal – startVal)/duration; // set the amplitude amount of the bouncy ending animation based on the duration
w = freq*Math.PI*2; // a multiplier for freq times one full rotation around a circle
endVal + amp*(Math.sin((t-duration)*w)/Math.exp(decay*(t-duration))/w);} // the calculation for the decaying sine-shaped animation

Kalleheikki Kannisto
Senior Graphic Designer

[John Wooltorton]

Thank you so much for your explanation. You really are my lifesaver. However, I still have a few noob questions.

What do you mean by “inside the animation duration”? Does this mean that the duration of the text layer is shorter than the variable “duration”?

Also, line 5, how is the “time” value of each letter used? I can see that it is used in the if statement but I don’t understand how it is related to the “time” value of the letters.

And second last line, what’s the purpose of multiplying one full rotation around a circle?

Last question, last line, what is “sine-shaped animation”?

Thanks again for answering my question 🙂

[Kalleheikki Kannisto]

I haven’t tried to use the expression, so I can’t tell exactly what it does, but from reading it I gather it moves the letters in the layer with a one-frame delay between each letter from one animated position (rotation, scale, etc.) to another.

The animation duration would be the time set by the duration variable, in this case 0.12 seconds. It kinda looks like both the motion and the bounce animation use the same value, so the total animation time might be double that.

The individual “time” value is used to offset the animation by one frame, so that each subsequent letter moves one frame later the the previous.

One rotation around the circle is preparation for the sine-wave animation. So with frequency one you get one wave, frequency 2 two waves, etc.

For sine-shaped animation, I mean a back and forth, pendulum-like motion like the sine wave. That math is used to generate a sine-wave type motion after reaching the end value.

There may be some errors in what I describe, as I haven’t seen exactly what it does, this is just from reading the code.

Kalleheikki Kannisto
Senior Graphic Designer