What is a Sheet in Theatre.js?
Sheets contain one or more Objects, that can be animated together.
You can create a Sheet with the Project.sheet function in
If a Sheet with the given name already exists, it will return the existing Sheet instead of creating a new one.
// project is a Project created earlier through getProjectconst mySheet = project.sheet('My Sheet')
Playing a Sheet's animation
Each Sheet has a Sequence attached to it. You can access a Sheet's Sequence through Sheet.sequence. You can then use the playback controls on the Sequence to play back the animation.
If you have multiple instances of the same thing in your page, like the same animated button, or the same animated character, you would want to control these instances with using the same Sheet. After all, the animations are the same, you just want to be able to control them independently of each other. Theatre.js supports this use case, through Sheet Instances. You can create an instance of a sheet by passing an optional instance id as the second argument to Project.sheet.
const submitButtonSheet = project.sheet('Button', 'Submit')const cancelButtonSheet = project.sheet('Button', 'Cancel')
You can then independently control the animations of two buttons backed by these sheets. Calling
submitButtonSheet.sequence.play() will not affect the button backed by
Learn more about related API at Sheet API docs.
Want to learn more? Take a look at some more in-depth topics from our manual:
This guide covers creating projects, managing their states, saving and loading their states, and more.
This guide covers Sheet Objects in Theatre.js.
Learn how to customize the props you want to animate with Theatre.js. When creating a Sheet Object, we define the props that we want to animate on it. Props can have different types which can be imported from "@theatre/core".
Working with Sequences
In this guide, we'll explore the tools that Theatre.js offers for creating animations.
Learn about assets in Theatre.js
Learn how to load and synchronize music or narration audio to an animation.
Learn the different parts of the Studio.
The Theatre.js Studio API enables you to define extensions that extend the Studio's UI and/or extend the functionality of Studio.
Keyboard & Mouse Controls
A catalog of controls in Theatre.js Studio.
Was this article helpful to you?
Last edited on January 29, 2023.
Edit this page