In this article
# ๐ Quick start
Theatre is framework agnostic and can be used in any frontend web project. Theatre can animate DOM elements, THREE.js objects, any JavaScript variable... or even IOT devices. This page gives some ways to play around with Theatre.js or quickly add Theatre.js to your web page.
# Online playgrounds
If you just want to try Theatre.js, an online playground is the easiest option. Fork or play around with one of the following starter playgrounds to get started.
- "Hello World" CodePen (opens new window)
- "Hello World" CodeSandbox (opens new window) (refresh the in-sandbox browser if the example does not show up)
Once you've gotten comfortable with the Theatre.js animation editor, check out the following cool (and a bit complicated) examples of using Theatre.js to animate a 3D visualization in sync with music ( tutorial video (opens new window)) and to animate and manipulate an SVG.
- THREE.js + music synchronization CodeSandbox - Orb shader (opens new window),
- THREE.js + music synchronization CodeSandbox - Flower animation (opens new window)
- SVG animation (opens new window)
# Download a starter project folder or HTML file
If you want to try out Theatre.js on your local computer you can download this starter JS project: theatreHelloWorld.zipโค. Once you've downloaded the zip file, unzip it, navigate to the unzipped folder in your terminal, and run these commands:
npm install
npm run start
You should see a "Hello World" Theatre.js web page in your browser after running the above commands.
You can also download this simple HTML file and open it in your browser and favorite code editor: theatreHelloWorld.htmlโค.
# Quickly add Theatre.js to a web page
A prebundled package called @Theatre/browser-bundles (opens new window) is available in case you do not want to use a bundler. @Theatre/browser-bundles
can be loaded into a web page or JS file via a CDN like JSDelivr (opens new window) either with an empty ES6 import (opens new window) or a script tag:
You can also download the prebundled JavaScript fileโค instead of using a CDN and load it using one of the two methods above.
Advanced: if you do not need the Theatre.js UI you can download the minified core JavaScript fileโค.
โ ๐ The Guide ๐ Learn the basics โ