Playback settings

The playbackSettings object defines how our animation will play when entering a state.

Quick start:

addStateMachine({
      descriptor: {
        ...
      },
      states: {
        running: {
          playbackSettings: {
            autoplay: true,
            loop: true,
            direction: 1,
            segments: '...',
          },
        },
      ...

Available playback settings for state machines:

autoplay?: boolean

Defaults to false if not defined.

---

defaultTheme?: string

Id of the theme to apply.

---

direction?: -1 | 1

Defaults to 1 if not defined.

---

intermission?: number

---

loop?: boolean | number

---

playMode?: PlayMode

Either normal or bounce.

---

speed?: number

Defaults to 1 if not defined.

---

playOnScroll?: [number, number]

Syncs the animation to the scrolling of the page.

Takes a visibility interval between which the animation will sync. For example using [0.5, 1] the animation will start syncing when it is positioned half way down the page and stop when it is no longer visible at the bottom of the page.

Values should be between 0 and 1. Defaults to [0, 1] (As soon as it's visible until it is no longer visible).

If segments are defined, they will be taken in to effect even when playOnScroll is defined however they must be defined as [number, number].

---

segments?: [number, number] | string

Play a segment of the animation.

Definable as either two frame numbers or as a named marker.