theatre

Theatre.js is a web animation library aimed at high-fidelity motion design. It is built for situations where you need fine-grained control over movement: precise timing, intricate sequencing, and the ability to express nuance in how things move on screen. It is distinct from simple CSS transition tools in that it targets complex, choreographed animations.

The library can be used in two ways: by writing code directly, or through a visual editor called the Studio. The Studio provides a graphical timeline and property controls you can use to design animations while looking at a live preview, similar to how video editing or keyframe tools work. Once you are done designing, you export the animation data and include it in your application using the core library.

Theatre.js works with a wide range of targets. The README shows examples of animating 3D objects built with Three.js, animating HTML and SVG elements through React or other libraries, designing micro-interactions, and driving generative art. Any JavaScript variable can be animated through it, not just visible elements.

The library is split into two packages with different licenses. The core package (@theatre/core), which runs in the finished application, is released under the Apache License 2.0. The studio package (@theatre/studio), used only during development to design animations, is released under AGPL 3.0. The README notes that only the Apache License applies to shipped products because the studio is not included in the final bundle.

Documentation and tutorials are at theatrejs.com/docs. Video tutorials are available on YouTube. Community support is through Discord and Twitter. At the time of the README, version 1.0 development had moved temporarily to a private repository to allow faster iteration, with plans to push the work back to this public repository.