@threlte/theatre

sheetObjectAction

When Theatre.js represents the animated elements on a page as Sheet Objects which have props you can animate. A Sheet Object can be a ThreeJS element or a DOM element.

The createSheetObjectAction hook allows you to animate DOM elements through a Svelte Action.

Theatre.js Docs


Sheet Object	Sheet Object Manual	Sheet Object API Reference
Prop Types	Prop Types Manual	Prop Types API reference

Usage

This hook must be initialized inside a child component of <Sheet>:

// Scene.svelte
<script lang="ts">
  import { createSheetObjectAction, useSequence } from '@threlte/theatre'

  const sheetObjectAction = createSheetObjectAction()
</script>

<div
	use:sheetObjectAction={{
		key: 'foo',
		props: { width: 230 },
		callback: {node, { width }} => {
			node.style.width = `${width}px`;
		}
	}}
>
	I Am Animated!
</div>

Where the parent component looks something like this:

<script lang="ts">
  import { Project, Sheet, Sequence, Studio } from '@threlte/theatre'

  import Scene from './Scene.svelte'
  import state from './state.json'
</script>

// App.svelte
<Project config={{ state }}>
  <Sheet>
    <Sequence />
    <Scene />
  </Sheet>
</Project>

This is because under the hood we must first retrieve the sheet context so we can instantiate the object in it.

Example

Action

The action takes the following arguments:

arg	type	description
key	string	The key of the object, shown in the studio UI (may be namespaced with slashes)
props	Props	Declaration of your props and their types (see Theatre.js manual entry and API reference)
callback	(node: HTMLElement, props: Props) => void	A callback function called to update the HTMLElement node whenever the prop changes.

Previous Page actions

Next Page Getting Started