A few lines of code, moving the parts.

Script an animation with JavaScript in your browser, nothing uploaded: move parts every frame, answer the pointer and keys, then bake it into keys.

By Suraj Kumar6 November 20266 min read

Some motion is easier to write than to key: a part that bobs on a wave, dots scattered by chance, a dial that follows the pointer. KeepSimp's Animation maker lets you write it in JavaScript beside the artboard. The script runs in your browser, sealed off from the site and the network, and nothing is uploaded.

Where scripts live.

In Animate, an artboard's scripts are listed under Scripts, below its state machines. Add a script opens a new one in the dock under the artboard, with a few lines that already move a part up and down. Beside the code is What a script can do, the list below in plain words, and What it said, where the script's own lines appear.

Each script can be renamed, switched off or deleted. One that is off does not run and is not baked into anything.

What a script can call.

onStart runs once, when the script starts. onFrame runs every frame, with the seconds since the start and the timeline's frame. onPointer hears the pointer going down, up or moving, in the artboard's units, and onKey hears a key pressed on the artboard. onInput hears a state machine's input change.

get reads a part's value as it is shown (x, y, rotation, scaleX, scaleY, opacity, width, height, fill, stroke and the others the inspector keys) and set changes it, to a number, a colour such as #0d9488 or a list of numbers. input, setInput and fire read and set a state machine's inputs and fire its triggers. random gives a number from 0 to 1 that comes out the same every run, and Math.random does too. log says something under What it said.

Parts are named as they are in the layers list. A part, property or input the artboard does not have, or a value of the wrong kind, stops the script and says on which line.

A star that bobs and turns

// Moves the Star up and down, and turns it slowly.
let top = 0

onStart(() => {
  top = get("Star", "y")
  log("Started at", top)
})

onFrame((seconds) => {
  set("Star", "y", top + Math.sin(seconds * 4) * 40)
  set("Star", "rotation", seconds * 45)
})

When it runs.

A script runs while a timeline plays in Animate, and while a state machine is tried with Try it, where it hears the pointer, keys and inputs too. What it sets is laid over the timeline's keys on a copy kept for that run. The project itself never changes, so stopping puts every part back where its keys say.

Sealed off, on your device.

Each run gets a frame of its own that may run scripts and do nothing else. Its content security policy blocks every request, so a script cannot reach KeepSimp's page, what your browser keeps for the site, your files or the network. It hears only what the editor sends it each frame, and every answer is checked before anything is drawn.

A loop that never ends is broken after a quarter of a second, and its line is said. A frame that takes longer than a second stops the script. One frame may set at most 500 values and say at most 50 lines. Nothing about the script or the animation is sent anywhere.

Bake it into keys.

Bake into keys (⌘ or Ctrl, Shift and Enter) runs the script over the play range of the timeline shown, at its frame rate, with the timeline's own seconds and the same random numbers. Where a value changes it writes a key, on a new timeline or on this one, as you choose under Bake into, and then switches the script off so the part does not move twice. The keys are ordinary ones, to move or change by hand, and the whole bake is one step to undo.

What depends on someone is not baked: inputs, the pointer and keys. The bake says so. A timeline longer than 10,000 frames is refused.

Which files keep it.

Pictures, videos and GIFs of a timeline are drawn with every script that is on baked into a copy as they are made, so the motion is in them. A .riv, a Lottie or an SVG is written without scripts: these are KeepSimp's own scripts, and the players that play those files never run them. The editor says so beside the code and in Export, which offers to bake the scripts first, so that the motion becomes keys every format keeps.

A little less theory. A little more doing.

Try it on your own terms, with a free browser tool.

Try the tool