eKeys

An After Effects animation engine built for expressions.

Usage | Example | Contact

---

✨ Download eKeys ✨

---

Overview

eKeys is a system of doing animation in Adobe After effects entirely within expressions, with the same level on control as keyframes.

It comes in the form of a .jsx file that's imported into the project, and a set of expressions to be applied to each property you wish to animate, with the values for each 'keyframe' to be added in the expression.

Its purpose is to speed up the creation of After Effects templates and other automated work.

eKeys is written in TypeScript using our Expression Library Template

Features

• Animate between numbers or arrays
• Full control over easing, including incoming and outgoing velocities
• No installation necessary, just import 1 file
• Simple and succinct expression interface
• Free and open source

Contents

• Overview
  • Features
• Contents
• Compatibility
• Usage
  • 1. Download and import eKeys.jsx into your After Effects project
  • 2. Add a reference to the library in your expression
  • 3. Create an array of keyframes
  • 4. Animate between the keys
• Example
• Helpful Snippets
• By animators, for animators
• To Do
• License
• Contact

Compatibility

This version of eKeys is compatible with After Effects versions >= 16.0.1 (CC2019) which use the new Javascript engine.

⚠️ Make sure your project is configured to use the JavaScript engine by going to File > Project Settings > Expression Engine and setting it to JavaScript.

For a legacy version that works in the ExtendScript engine, view the ExtendScript Branch. Please note, this version of eKeys is not actively maintained.

Back To Top ↑

Usage

1. Download and import eKeys.jsx into your After Effects project

Head over to the releases page to download the latest version of the eKeys.jsx file.

This is the JSON file that contains the necessary code to run eKeys. You may not be able to drag and drop it into your project, in which case you will need to use the import dialog.

2. Add a reference to the library in your expression

To reference the library in an expression, you need to assign it to a variable. This is done via the line:

const eKeys = footage('eKeys.jsx').sourceData;

⚠️ Since After Effects doesn't count footage items that are only referenced within expressions as used, it's recommended that you also place the eKeys.jsx file in any compositions where it is referenced.

This will ensure After Effects includes the file when collecting assets or packaging into a Motion Graphics Template.

3. Create an array of keyframes

Each keyframe is represented as an object within an array.

// 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,
  },
];

Keyframe Object Properties

• keyTime Where the keyframe is in time, in seconds
  • Type: number
  • Required: true
• keyValue Value of the keyframe
  • Type: number or array
  • Required: true
• easeIn Ease in amount
  • Type: number
  • Required: false
  • Default: 33
  • Range: 0-100
• easeOut Ease out amount
  • Type: number
  • Required: false
  • Default: 33
  • Range: 0-100
• velocityIn Incoming speed
  • Type: number
  • Required: false
  • Default: 0
  • Range: 0-100
• velocityOut Outgoing speed
  • Type: number
  • Required: false
  • Default: 0
  • Range: 0-100

While it is recommended you order the keyframes according to their keyTime for the sake of readability, it is not required as they are sorted before the animation is calculated.

4. Animate between the keys

The final animated value can be returned by calling the animate function.

eKeys.animate(keys, time? = thisLayer.time);

animate() Function Inputs

• keys Array of keyframes
  • Type: array
  • Required: true
• time Incrementing animation time
  • Type: number
  • Required: false

Back To Top ↑

Example

An example setup of an animation group with a couple of keyframes:

// Import eKeys library
const eKeys = footage('eKeys.jsx').sourceData;

// Create an array of keyframes
const inKeys = [
  {
    keyTime: 1,
    keyValue: 0,
    easeIn: 0,
    easeOut: 66,
  },
  {
    keyTime: 2,
    keyValue: 250,
    easeIn: 90,
    easeOut: 0,
  },
];

// Animate
eKeys.animate(inKeys);

You can also destructure animate from the sourceData object:

const { animate } = footage('eKeys.jsx').sourceData;
// ...
animate(inKeys);

Back To Top ↑

Helpful Snippets

• Create default keyframe parameters

  Use the JavaScript spread syntax to use a set of default parameters across keyframes.

  View Code

  const keyDefaults = {
    easeIn: 90,
    easeOut: 50,
    velocityIn: 10,
    velocityOut: 50,
  };
  
  const keys = [
    {
      keyTime: 0,
      keyValue: [0, 50],
      ...keyDefaults,
    },
    {
      keyTime: 2,
      keyValue: [800, 50],
      ...keyDefaults,
    },
  ];

• Merge multiple keyframes groups

  Easily merge multiple keyframe arrays to be animated using the JavaScript spread syntax.

  View Code

  const inKeys;
  const outKeys;
  const animOut = true;
  const keys = animOut ? [...inKeys] : [...inKeys, ...outKeys];
  eKeys.animate(keys);

  This could also be done by creating multiple AnimGroup's.

• Remove specific keyframes

  Remove one or more keyframes based on another variable.

  View Code

  const keys;
  const enableSpin = true;
  if (!enableSpin) {
    // Remove keyframes 4 and 5
    keys.splice(3, 2);
  }

Back To Top ↑

By animators, for animators

eKeys is built in such a way to make it easy for animators to use, based on the inputs and workflows they're used to when creating standard After Effects keyframes.

Outside of this context, eKeys might not make much sense or appear a little strange. It's not for everyone!

Back To Top ↑

To Do

• Add incoming and outgoing velocity inputs
• Updated curve sampling to Newton-Raphson
• Update to Javascript engine (from ExtendScript)
• Input validation and error checking
• Add option to input easing as array, same as css cubic-bezier.
• Add animation method input (overshoot, bounce etc)
• Add ability to write in standard js and transform into After Effects jsx using babel

Back To Top ↑

License

This project is licensed under the terms of the GNU GPLv3 license. In summary:

Permissions of this strong copyleft license are conditioned on making available complete source code of licensed works and modifications, which include larger works using a licensed work, under the same license. Copyright and license notices must be preserved. Contributors provide an express grant of patent rights.

The bezier function is from Gaëtan Renaudeau's cubic-bezier project, and is licensed under the terms of the MIT License.

Back To Top ↑

Contact

Bugs, issues and feature requests can be submitted by filing an issue on Github. For everything else, feel free to reach out to @modeveloper on twitter.

Back To Top ↑