sequence.mdx

order	category	name	sourcePath	type	componentSignature
1.4	@threlte/theatre	<Sequence>	packages/theatre/src/lib/sequence/Sequence.svelte	component	props bindings name type default required description rate number 1 false Set the speed of playback (Theatre.js) name type default required description range [number, number] | undefined [0, length] false Choose what part of the animation is played (Theatre.js) name type default required description iterationCount number 1 false Control how often the animation is played. Set Infinity to keep looping (Theatre.js) name type default required description direction "normal" | "reverse" | "alternate" | "alternateReverse" normal false Choose the direction of animation playback (Theatre.js) name type default required description autoplay boolean false false Choose whether to automatically play the animation when the component is mounted (Threlte) name type default required description delay number 0 false When using autoplay, how many milliseconds to wait before starting playback (Threlte) name type default required description autoreset "always" | "onMount" | "onDestroy" | undefined undefined false Reset the playhead when the component is mounted, unmounted**, both or neither (Threlte) name type default required description autopause boolean false false Whether to pause playback when the component is unmounted (Threlte) name type default required description audio {source: AudioBuffer; audioContext: AudioContext; destinationNode: AudioContext['destination'];} {} false Syncronize an audio track to the sequence; see the audio section below (Theatre.js) name type position number | undefined name type play (opts?) => Promise<boolean> (see Theatre.js Sequence API docs for options) name type pause () => void name type sequence ISequence name type sheet ISheet

Sequences are the heart of the Theatre.js animation system. The sequence represents the animation timeline and provides an API for controlling its playback. In Threlte 7, you can reactively control animations through the <Sequence> component, which you place inside a <Sheet>.

Currently, you can only have one sequence in each sheet. Future versions of Theatre.js are expected to support multisequence sheets.

Theatre.js Docs

Sequence	Sequence Manual	Sequence API Reference

Usage

The following example shows how <Sequence> can be used to build a simple playback controller.

Lifecycle

Threlte provides lifecycle props to allow you to configure how the sequence playback is connected to the Svelte component lifecycle. See the autoplay, autoreset and autopause props below.

Note that the underlying Theatre.js sheets are persisted even when unmounting a <Sheet> component. That's why the sequence doesn't reset automatically when unmounting a <Sheet>, and why the autoreset options is required.

Audio

The audio options allow you to attach a soundtrack to your animation sequence. Theatre.js achieves this using the Web Audio API. For more details, see audio manual and attach audio API reference

Slot Prop

When using the sequence in a child component, a slot prop can come in handy.

<script lang="ts">
	import { T, InteractiveObject } from '@threlte/core'
	import { Sheet, Sequence, SheetObject } from '@threlte/theatre'
</script>

<Sheet>
	<Sequence let:play>
		<SheetObject
			key="Cube"
			let:Transform
		>
			<Transform>
				<T.Mesh>
					<InteractiveObject interactive on:click={play}>
					<T.BoxGeometry />
					<T.MeshStandardMaterial />
				</T.Mesh>
			</Transform>
		</SheetObject>
	</Sequence>
</Sheet>