Adobe After Effects and JavaScript

On January 1st 2021, I challenged myself: record 1 second of video every day for the entire 2021 year and compile them into a single film. I really enjoyed achieving this idea: It felt great to make something a little creative since I'm not at all, I could get familiar with my camera, I still love video editing and it was a perfect reason to say hello to my family/friends. Finally, it was even more exciting since I kept the challenge secret.

But enough storytelling, Let's get to the point of this article: Something I wanted for this video is the current date the video was taken. And of course, changing 365 times the text layer in my Adobe project was not part of the plan. So let's explore how to automate this tedious task in Adobe After Effects.

When I was a student, I learned that Adobe applications come with a scripting language named ExtendScript. Even though the language was syntactically close to JavaScript, I didn't even try it. The reason? With the Studio crew, we were very focused on investigating all the secrets of a light hoppy drink, with a drawing of the flying dutchman on the bottle.

Since October 2018, no more excuses: most Adobe applications embed a JavaScript engine (V8 or JavaScriptCore), which means we can write modern JS and use the latest features.

It means I should be able to generate all the dates with a few lines of code. I would write something like this if my target was the browser's runtime:

function generateDate(time = 0) {
  const date = new Date(2021, 0, 1)
  date.setDate(date.getDate() + Math.floor(time))
  const options = { month: 'long', day: 'numeric' }
  return date.toLocaleDateString('en-US', options) // January 1
}

But here the code will run in the Adobe application, not a web browser. It means also that Adobe runtime exposes APIs and data to the program. One missing information here is the time variable. It must correspond to the current time of the composition. According to the documentation, time is a global variable representing the composition time, in seconds. That's exactly what I need:

// 'time' is a global variable
const date = new Date(2021, 0, 1)
const options = { month: 'long', day: 'numeric' }
date.setDate(date.getDate() + Math.floor(time))
date.toLocaleDateString('en-US', options)

Note for never: I wonder if we can import external libraries: imagine the limitless possibilities ahead of me if I can generate NFT videos with the library is-odd or moment...

I'm glad I wasn't the robot on this task.