What animation tools and features does Theatre.js offer?

Theatre.js is a JavaScript animation library with a visual editor that runs in the browser. It is built for motion design work that you author in code and then refine through a graphical interface, and it works with any stack because it only changes JavaScript variables. If you are animating a THREE.js scene, a WebGPU setup, or UI interactions, the toolset below is what you get.

Sequence editor for blocking out motion

The sequence editor is where you lay down the rough timing of an animation. You block out a sequence in seconds using keyframes, then adjust from there. The page describes this as the place to "block out your sequence in seconds with our cutting-edge sequence editor."

The workflow it supports:

• Place keyframes to define position, rotation, or any other animatable property over time.
• Use presets to add quick flare before fine-tuning.
• Move into the graph editor once the rough sequence is in place.

Dope sheet and graph editor

These are the two views for refining keyframes after the initial block-out.

Dope sheet — a keyframe overview where you manage the timing and arrangement of your keys across properties.

Graph editor — the view for fine-tuning every frame, adjusting the interpolation curves between keyframes.

The page frames the progression as: block out first, then "dive into the graph editor and fine-tune every frame."

Easing presets and property editor

Easing presets let you apply ready-made motion curves instead of hand-authoring every transition. The property editor is where you adjust individual values on the objects you are animating.

Together these cover the common case: pick a preset for quick results, then open the property editor when a specific value needs to change.

Code and visual editing combined

Theatre.js is not an either/or choice between writing code and using a GUI. The page states it directly: "Create in code, perfect in the browser — best of both worlds."

In practice this means you define your animation state in JavaScript, then use the browser editor to iterate on the values without a rebuild cycle. The library's only job is changing JS variables, so whatever you do with those variables afterward is up to you.

Extensibility and stack compatibility

Theatre.js is extensible through official extensions or tools you build yourself. The page lists example uses:

• Move the camera for a specific shot
• Adjust lights
• Tweak shaders
• Build custom UI, custom tools, and custom workflows

Because it works by changing JS variables, it is not tied to a particular renderer. A custom THREE.js setup or a self-written WebGPU library both work.

What this means for choosing it

The project reports 7,700 GitHub stars and is developed in the open. To evaluate it against your own stack, the practical test is whether your animation targets are plain JS variables — if they are, the editor can drive them.