The entry point is After Effects expressions. You alt-click a stopwatch and type a little JavaScript directly in the timeline. Most animators have already done this without thinking of it as coding.

wiggle(3, 20)

That's it. That's code. And you already understand what it does.

You don't need to go deep

Knowing a handful of things gets you 80% of the value:

• Variables — a value has a name and a type
• Conditionals — if/else to make things respond to other things
• Loops — do this thing N times, or for every file in a folder

The rest you look up when you need it.

The practical stuff

Once I learned basic Python, the first thing I wrote set up my whole project folder in one command. Then batch renaming frames. Then a script that reads a CSV and spits out title cards in After Effects. None of it was clever — just enough to stop doing the boring parts by hand.

The mental shift matters too. You start seeing animation as systems rather than one-off solutions. That makes you better at both.

Alt-click a stopwatch. Type some code. Done — you're writing expressions.

No setup, no IDE, no terminal. The feedback is instant and visual, which makes this the best possible way to start learning code as an animator.

The four you'll use everywhere

wiggle — shake a layer organically

wiggle(3, 20) // 3x per second, 20px max offset

loopOut — loop your keyframes forever

loopOut("cycle")    // repeats forward
loopOut("pingpong") // reverses each loop

time — drive anything with the clock

time * 90 // slow spin. crank it up for faster

value — offset whatever's already keyframed

value + [0, -50] // push the existing position up by 50px

Linking properties

Drag the pickWhip from one property to another and AE writes the expression for you. Useful for tying a layer's opacity to a slider, or locking scale to a null.

thisComp.layer("Control").effect("Opacity")("Slider")

You don't need to write that by hand — just read it after the pickWhip generates it, and it'll start making sense.

Just start

Take any animation you've already built. Add one expression. Break it. Fix it. That's the whole method.

The work that isn't animation — renaming frames, building folder trees, converting formats — quietly eats hours. Python makes it disappear.

Project setup

Write this once, run it at the start of every job:

import os, sys

name = sys.argv[1]
base = f"/Users/you/Projects/{name}"

for folder in [
    "01_assets/footage", "01_assets/audio",
    "02_project_files",
    "03_renders/wip", "03_renders/final",
    "04_delivery"
]:
    os.makedirs(f"{base}/{folder}", exist_ok=True)

print(f"Created: {name}")

python setup.py client-name

Whole folder tree, named consistently, in under a second.

Batch rename frames

AE renders frames like comp_[0000].png. This cleans them up:

from pathlib import Path

render_dir = Path("/path/to/renders")
for i, f in enumerate(sorted(render_dir.glob("*.png"))):
    f.rename(render_dir / f"output_{i:04d}.png")

Notify on render complete

Install watchdog and point it at your renders folder. It fires a desktop notification (or a Slack message) the moment new files appear. No more tabbing back to check.

Start with the folder script. Customize it to your actual workflow. Then find the next annoying repetitive thing and automate that. That's it.

Generative art is what happens when you write rules and let the output surprise you. For animators it clicks fast — setup() runs once, draw() runs every frame. You've thought in frames your whole career.

Start here

function setup() {
  createCanvas(800, 800);
  background(10);
}

function draw() {
  fill(random(255), 150, 200, 80);
  noStroke();
  ellipse(random(width), random(height), random(5, 30));
}

Random semi-transparent circles, every frame. Not much — but it's a live, running visual system in ten lines.

random() vs noise()

random() jumps around chaotically. noise() flows smoothly — more organic, more interesting:

let t = 0;

function draw() {
  let x = noise(t) * width;
  let y = noise(t + 100) * height;
  ellipse(x, y, 8);
  t += 0.005;
}

Pass different offsets for X and Y and you get wandering motion with no keyframes. This is Perlin noise — the function behind most natural-looking generative movement.

Particle systems

A classic: a bunch of points that each move independently.

let particles = [];

function setup() {
  createCanvas(800, 800);
  for (let i = 0; i < 200; i++) {
    particles.push({ x: random(width), y: random(height), t: random(1000) });
  }
}

function draw() {
  background(10, 20); // low alpha = trails
  for (let p of particles) {
    p.x += noise(p.t) * 4 - 2;
    p.y += noise(p.t + 500) * 4 - 2;
    point(p.x, p.y);
    p.t += 0.005;
  }
}

Bringing it back to video

p5.js sketches can be recorded frame-by-frame and imported into After Effects as image sequences. Complex organic backgrounds, particle passes, texture layers — all faster to generate in code than to animate by hand.

A lot of the most interesting animation happening right now isn't in video — it's in browsers. Scroll-triggered reveals, type that follows the cursor, interactive data viz. Same goal as motion work, totally different pipeline.

What carries over

Easing vocabulary is identical. ease-in-out, bezier curves — same model as After Effects, different syntax:

.box {
  transition: transform 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
}

And GSAP's timeline API maps almost directly to how you already think:

gsap.timeline()
  .from(".headline", { opacity: 0, y: 40, duration: 0.6, ease: "power2.out" })
  .from(".subhead",  { opacity: 0, y: 20, duration: 0.4, ease: "power2.out" }, "-=0.2")
  .from(".body",     { opacity: 0,         duration: 0.3 }, "-=0.1");

Tweens, sequencing, overlap offsets — same mental model.

What's new

Events replace the render button. Animation responds to what the user does:

document.querySelector(".btn").addEventListener("mouseenter", () => {
  gsap.to(".btn", { scale: 1.05, duration: 0.2 });
});

ScrollTrigger is where things get fun:

gsap.from(".panel", {
  scrollTrigger: { trigger: ".panel", start: "top 80%" },
  opacity: 0, y: 60, duration: 0.8
});

No render button. Save, switch to browser, refresh. The feedback loop is tight.

Where to start

Install GSAP, open a blank HTML file, and try to recreate something you've already built in After Effects. The translation work teaches you more than any tutorial.