Using Slider-Controlled Timing with the valueAtTime Expression in After Effects

The After Effects expression:

JavaScript
valueAtTime(linear(effect("Slider Control")("Slider"), 0, 100, key(1).time, key(numKeys).time))

is used to control the timing of an animation based on the value of a slider control. Let’s break down what this expression does and provide some examples.

Explanation

JavaScript
effect("Slider Control")("Slider"):

This part references a slider control effect applied to the layer. The slider’s value will drive the timing of the animation.

JavaScript
linear(effect("Slider Control")("Slider"), 0, 100, key(1).time, key(numKeys).time):
  • The linear() function maps the value of the slider to a time range between the first keyframe (key(1).time) and the last keyframe (key(numKeys).time).
  • As the slider moves from 0 to 100, the expression linearly maps it to a time range defined by the keyframes. This allows you to “scrub” through an animation using the slider control.
JavaScript
valueAtTime(...):

This expression tells After Effects to display the property value at a specific time, determined by the result of the linear() function. Essentially, the slider acts as a controller to play back the animation by mapping slider values to different points in time.

Example Scenarios

Imagine you have a position animation where an object moves from point A to point B over two keyframes.

  1. Position Animation:
    • The position property has two keyframes:
      • The first keyframe is at 0 seconds, and the object is at x=100.
      • The second keyframe is at 5 seconds, and the object is at x=500.
    • By applying this expression to the position property with a slider range of 0 to 100, moving the slider will “scrub” through the animation:
      • Slider at 0: Displays the position at 0 seconds (object at x=100).
      • Slider at 50: Displays the position halfway through the animation (approximately at x=300).
      • Slider at 100: Displays the position at 5 seconds (object at x=500).
  2. Opacity Animation:
    • Suppose an object’s opacity animates from 0% to 100% over 3 seconds.
    • With this expression and a slider ranging from 0 to 100, you could control the opacity’s animation progress:
      • Slider at 25: Displays opacity at 0.75 seconds.
      • Slider at 75: Displays opacity at 2.25 seconds.
    • Moving the slider will allow you to scrub through the opacity transition smoothly.

Practical Uses

This expression is beneficial for:

  • Creating custom controllers for time-based animations.
  • Allowing users to scrub through animations via a slider.
  • Giving users fine-tuned control over animation timing without changing the actual keyframes.

This setup makes animation control more intuitive, especially for complex projects, by providing a single slider interface to scrub through keyframe timing.

Leave a Reply

Your email address will not be published. Required fields are marked *