Sheets – Theatre.js

#What is a Sheet in Theatre.js?

Sheets contain one or more Objects, that can be animated together.

#Creating Sheets

You can create a Sheet with the Project.sheet function in @theatre/core. 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 getProject
const 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.

sheet.sequence.play()

#Instancing Sheets

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 cancelButtonSheet.

#API

Learn more about related API at Sheet API docs.

#Learn more

Want to learn more? Take a look at some more in-depth topics from our manual:

Projects

This guide covers creating projects, managing their states, saving and loading their states, and more.

Sheet Objects

This guide covers Sheet Objects in Theatre.js.

Prop types

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.

Assets

Learn about assets in Theatre.js

Using Audio

Learn how to load and synchronize music or narration audio to an animation.

Studio

Learn the different parts of the Studio.

Authoring extensions

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.

Advanced uses

Was this article helpful to you?

Last edited on October 06, 2023.
Edit this page