skip to Main Content

Page updated, redesigned, & republished: 2 November 2018

Sections on this page:

Welcome to the JavaScript Primmer WOTM Tour:

Helping you build a foundation for writing expressions

WOTM: Adobe After Effects® Expressions Graphic

What is the JavaScript Primmer WOTM Tour?

This tour is powered by the JavaScript Tour menu in the sidebar (or the bottom of the page if you’re reading this on a small screen), which is a simple tool to help organize your reading of several Word of the Moment (WOTM) entries. If you are new to After Effects or have never written code, following the JavaScript Tour menu in the order given should give you a basic foundation in JavaScript as it applies to writing expressions.

If you’ve been using After Effects, but only dabbled in expressions, then the JavaScript Tour menu allows you to skip topics with which you are familiar. This method of presentation also allows the separation of these concepts in the Word of the Moment glossary, which, in turn, allows them to be a part of the tooltip links throughout the donQmedia website.

What is JavaScript?

JavaScript is  a scripting language, and is one of the primary languages used to build the web, along with HTML and CSS. However, we After Effects users don’t have to learn all the ins and outs of JavaScript because we are concerned only with the code that goes in the expression fields of properties.

Though the expression language is based on a scripting language, a subtle but important difference exists between a script and an expression: Whereas a script tells an application to do something, an expression says that a property is something.

Adobe
Expression Basics

After Effects uses the core JavaScript 1.2 language, but none of the extensions created specifically for web browsers.  All of the JavaScript information on this website is targeted toward writing code in the After Effects expression field. While it is possible to code scripts and plugins to add custom tools to After Effects, such as Duik, that is beyond the scope of this website.

Two good sites to visit for more advanced expression coding in After Effects are J. J. Gifford’s and Dan Ebbert’s websites.

If you want to know how to do more extensive coding in JavaScript in general I suggest you try JavaScript.com and W3Schools.com. Also, JavaScript: The Definitive Guide by David Flanagan1 is an excellent resource for the serious JavaScript programmer (that reference focuses on coding for the web).

Why learn JavaScript?

You don’t have to master JavaScript in order to create useful and time saving scripts, but a little knowledge about coding expressions can go a long way. By going beyond simple pick whip connections, or single lines of code (e.g. wiggle), you can  sometimes save yourself a lot of keyframing (e.g., have cloth movement triggered by a puppet’s movement), or  build powerful puppet controllers. Understanding just a few of the often used expressions, such as linear(), if/else conditionals, clamp(), and framesToTime() can open a whole new world of possibilities when animating puppets.

The JavaScript Tour should give you a good foundation in writing expressions for After Effects, and, if  you pair it with the Controllers & Expressions Series, you will have a good start on learning to understand and write your own expressions. There is, of course, a lot to learn if you want to get into more complex coding, but you may be surprised what you can do with this basic foundation.

Code as language

Like written language, computer code has vocabulary, syntax, punctuation, and spelling rules. One of the big differences between written speech and computer code is that code can be extremely unforgiving. While a first grade teacher becomes adept at deciphering her young charges first attempts at the written word, a computer usually can’t understand what your intentions are if you don’t follow the rules explicitly. For example, JavaScript is case sensitive, which means if is not the same as If. Like human language, there can be many ways to say the same thing, but with code you have to be precise no matter how you say it.

That said, if when you make a coding error, After Effects will usually let you know; often telling you what line it is on and what kind of error it is. The error notice will pop up at the bottom of the Composition Panel. Unfortunately, not every coding error can be picked up when JavaScript is run. The code may be valid, but doesn’t do the job you thought it would.

Screenshot of JavaScript error message.

An error message pops up if you’ve made a mistake in your JavaScript code. If you have more than one mistake, it addresses the first one it comes across, identifying the line number and giving some information about the type of error. Once an error is detected, After Effects automatically disables the expression field.

Many ancient languages had no spaces or punctuation when written. Similarly, JavaScript doesn’t care about spaces. It also doesn’t care if the code is written on 1 line or 1000 either. The reason for breaking the code into lines is for human consumption – it’s much easier to read and find errors if you spread the code out. It’s also easier to insert and find comments. There are programs that will condense JavaScript code to 1 line, a process called minifying, and is used for web production to reduce the amount of data that needs to flow through the net.

Compare the two blocks of code below (don’t worry about what the code means, we’re just looking at how it appears visually). The are identical, except one is written on a single line:

Code example 1:

HC=comp("AE Mollie V7.2").layer("C_Head").transform.position;
SP=[250,250,0];
if(HC[1]<=0){
   Y=linear(HC[1],-50,0,-30,0);
}else{
   Y=linear(HC[1],0,50,0,50);
}
P=SP+[0,Y,0];
P

Code example 2:

HC=comp("AE Mollie V7.2").layer("C_Head").transform.position;SP=[250,250,0];if(HC[1]<=0){Y=linear(HC[1],-50,0,-30,0);}else{Y=linear(HC[1],0,50,0,50);}P=SP+[0,Y,0];P

If I had to figure out what was going on, I would want to work with code example 1 above.

Begin the tour

To begin the tour, simply use the JavaScript Tour menu in the sidebar at near the top of each tour  page, either clicking and reading in order (which I suggest if you’re new to all of this), or jump around to the topics you want to explore. For your convenience I’ve provide a set of buttons below.

Postscript

Hopefully, the information on the tour clears some of the mystery of writing JavaScript expressions. Combined with my tutorials and the Word Of The Moment, you should have enough tools to start writing some useful code that can make your AfterEffects life easier, and put life into your puppets.

1Flanagan, David. “JavaScript: The Definitive Guide,” page 1, O’Reilly Media, Inc., Sebastopol, California, © 2011. ISBN: 978-0-596-80552-4.

Back To Top