Lesson08 – Delays and Loops

Learn how to create a looping delay / echo / cascade effect on your animation

REMINDER
If you are an absolute beginner, please start your learning by checking the essential resources below:
http://www.jjgifford.com/expressions/basics/index.html
https://helpx.adobe.com/after-effects/using/expression-basics.html
http://www.motionscript.com

1. Setup

  • Create a new Shape Layer, with a group including a path/shape and a color fill
  • Import the color swatches preset from previous lesson, and rename the layer to “colors”. Make sure no layer is selected in the timeline when importing the preset
  • Rename the group in the new Shape Layer to “01”
  • Add xpr_colorShapes preset from previous lesson to the Fill; colors are now linked to the name of the group and the color swatches. When duplicating the group, it creates a new instance using the next color.
  • Animate the position property of the Group (“01”)

2. Delay

  • Duplicate the Group (“01”) and delete the keyframes on the position property
  • Add an expression to Shape Layer> Group(“02”)> Transform> Position
  • Create a new variable to store the group name
var i = thisProperty.propertyGroup(2).name;
  • Create a new variable to store the reference Group (“01”) postion
var pos = thisProperty.propertyGroup(4).content(“01”).transform.position;

or

using the pickwhip to retrieve the path

  • Shift in time the position value
.valueAtTime(time)
Returns the value of a property at the specified time, in seconds.
pos.valueAtTime(time-(i-1))

This result will delay the second Group animation of 1 second. To change the delay influence, you can either directly add a mathematic operator to (i-1) or add an expression control for a more intuitive control over the delay

  • Route 1: mathematic operator
pos.valueAtTime(time-(i-1)*5/25)

Now the delay will only be of 5 frames (in a 25fps composition). Note that positive values will invert the delay, making the top layer coming first.

  • Route 2: expression controller; add a Effect> Expression Control> Slider Control
var delay = effect(“Slider Control”)(“Slider”);
pos.valueAtTime(time+(i-1)*delay)
  • Duplicate Group (“02”) as many times as you want and adjust Slider (“delay”) if you chose route 2

3. Built-in loop

This simpliest way to loop an animation is to use one of the loop built-in object

  • Reveal the set of keyframes on Shape Layer> Group (“01”)> Transform> Position
  • Without deleting the keyframes, add an expression to the Position property
loopIn/loopOut(type,keyframes)
use keyframes to loop on the specified interval

loopInDuration/loopOutDuration(type, duration)
use the inPoint/outPoint of the layer to loop on the specified duration

Most used types are cycle (default) and pingpong;
check built-in help for more

loopOut()

You don’t need to specify any parameter in the brackets to repeat the animation

  • Find the frame where you wish the loop to end and add a keyframe

4. Modulo loop

The built-in loop objects are most of the time enough, but they have limits; first animation needs to be most of the time precomposed, secondly, they can not coexist with other expression in a same block of code.

  • Delete the keyframes on Shape Layer> Group (“01”)> Transform> Position and replace them with a linear interpolation
linear(time, 0, 2,[-1080,0],[1080,0])

If you try to add a loop object on the next line, you will be prompted with an error message; loop object can not be added to a pre-existing block of code. But modulo (%) has no such limit, it is a basic mathematic operator that plays well with interpolations.

  • Edit the expression
linear(time%2, 0, 2,[-1080,0],[1080,0])

Every 2 seconds, the animation will loop; it would work perfectly if we did not have to take into consideration the delay. You could either adjust the loop duration manually to a value greater than the endFrame value, or create a set of new variables to get the exact delay duration.

  • Edit the expression
var delay = Math.abs(effect(“Slider Control”)(“Slider”));
var i = (thisProperty.propertyGroup(3).numProperties-1);
linear(time%(2+delay*i), 0, 2,[-1080,0],[1080,0])

by adding the delay * number of iterations, the loop matches exactly the animation length.

  • To smoothen in/out the animation, change linear to ease
ease(time, startFrame, endFrame, value1, value2)
generates a smooth interpolation
ease(time%(2+delay*i), 0, 2,[-1080,0],[1080,0])

Unfortunatety, velocity values are not accessible through expression; to get more control on the velocity, check out Ease and Wizz by Ian Haigh, a script with a nice collection of expressions that generate Expo, Circ, Quint, Quart, Quad, Sine eases, and more!

DON’T FORGET
build your own presets collection to speed up your workflow
Click icon below to download presets (rename .key to .zip after download)
download

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s