Theatre.js

Theatre.js is a professional-grade animation library for the web that combines the precision of motion design tools like Adobe After Effects with the flexibility and programmability of code-based animation. Developed by the Theatre.js team and open-sourced under the Apache-2.0 license, it enables designers and developers to create complex, choreographed animations for web applications, games, data visualizations, and interactive experiences with an unprecedented level of control. Unlike traditional animation libraries that rely solely on code-defined keyframes and easing functions, Theatre.js provides a visual timeline editor (the Studio) where animators can scrub, adjust, and refine motion in real-time while the application is running. Changes made in the Studio are automatically synced back to the codebase as JSON state objects. Key features include: a sheet-based architecture where each Sheet represents a timeline of animations that can be played, paused, reversed, and controlled programmatically; sequence-based animations with precise keyframe control, support for cubic Bezier easing, hold keyframes, and spatial interpolation; object-level animation where any JavaScript object's properties can be animated (DOM elements, Three.js objects, Canvas contexts, CSS variables, or custom data); multiple sequenced playback with the ability to run multiple sheets simultaneously with independent timing; programmatic control via the Sheet API (play, pause, seek, set position); integration with React, Vue, Three.js, and vanilla JavaScript; and the ability to export animation data as portable JSON files. As of 2026, Theatre.js has over 11,000 GitHub stars.