eKeys

js
animate(keyframes);

The problem

When making templates in After Effects, you often need to set the time and/or value of keyframes dynamically.

This is traditionally done by remapping either time, or the animated value using the interpolation functions linear() and ease().

While it works, this involves a lot of boilerplate code, and you're unable to have control of the easing within expressions.

The solution

eKeys is a library for animating with expressions, with the same level of control as keyframes.

js
// Import eKeys library
const { animate } = footage("eKeys.jsx").sourceData;
// Create an array of keyframes
const keyframes = [
  {
    keyTime: 0,
    keyValue: [0, 0],
    easeOut: 66,
  },
  {
    keyTime: thisComp.duration,
    keyValue: otherLayer.transform.position,
    easeIn: 90,
  },
];
// Animate
animate(keyframes);

With eKeys you create your keyframes as an array of JavaScript objects, allowing you to set each of their properties dynamically.

Usage

Import

Download the library .jsx file and import it into your After Effects project.

Reference the library

The animate function takes an array of keyframes, and returns the animated value.

javascript
const { animate } = footage("eKeys.jsx").sourceData;

Create keyframes

javascript
// Example keyframe array
const keys = [
  {
    keyTime: 1,
    keyValue: [0, 0],
    easeIn: 0,
    easeOut: 66,
  },
  {
    keyTime: 2,
    keyValue: [thisComp.width / 2, 0],
    easeIn: 90,
    easeOut: 0,
  },
];

Animate

The final animated value can be returned by calling the animate function with an array of keyframes.

js
animate(keys);

Custom Interpolators

eKeys uses a bezier algorithm to interpolate between keyframe values with custom easing and velocity. In some cases, you may want to opt out of this interpolation and use a different method instead.

You can do this by passing a custom interpolation function to animate that takes in the current progress value and returns a new one.

For example, simple linear easing:

js
// Interpolate with linear progress
animate(keys, { interpolator: (t) => t });

Or to use After Effects built in easing functions:

js
// Interpolate with the ae easing function
animate(keys, { interpolator: (t) => ease(t, 0, 1) });

Exported Interpolators

eKeys also exports a variety of popular easing functions you can use.

These are exported as properties on the interpolators object.

js
import { animate, interpolators } = footage('eKeys.jsx').sourceData;
const keys = [] // Keyframes
animate(keys, { interpolator: interpolators.easeInElastic })

API

ts
animate(keys: Keyframe[], options: AnimateOptions): KeyValueType;

ts
type Keyframe = {
  keyTime: number;
  keyValue: number | number[];
  easeIn?: number = 33;
  easeOut?: number = 33;
  velocityIn?: number = 0;
  velocityOut?: number = 0;
};

ts
type AnimateOptions = {
  inputTime: number;
  interpolator: (progress: number, easeOut?: number, easeIn?: number) => number;
};

Checking the version

All of our libraries expose a version string you can use to check if it's up to date:

js
throw footage("lib.jsx").sourceData.version;