Transitions

Transitions allow us to go from one state to another based on various interactions.

Quick start:

addStateMachine({
  descriptor: {
    ...
  },
  states: {
    running: {
      ...
      onClick: {
        state: 'exploding',
      },
      onComplete: {
        state: 'finish'
      }
    },
    ...
  },
})

Transitions available:

---

onAfter {
    state: string;
    ms: number
}

After X amount of milliseconds have passed in the current state, transition to the one defined in 'state'.

---

onClick {
    state: string;
}

Transition to the state defined in 'state' after click is detected on the Lottie animation.

---

onComplete {
    state: string;    
}

Transition to the defined state after the animation has finished playing. If loop is true onComplete will not transition.

If the loop playback settings is a number, it will complete X amount of loops before transitioning.

If playOnScroll is defined in the playbackSettings once the animation has been scrolled to completion it will transition.

---

onMouseEnter {
    state: string;
}

Transition to the defined state when the mouseenter event is detected on the Lottie animation.

---

onMouseLeave {
    state: string;
}

Transition to the defined state when the mouseleave event is detected on the Lottie animation.

---

onShow {
    state: string;
    threshold: number[]
}

Transition to the defined state when the animation is visible on screen. The threshold is an array of numbers between 0 and 1 passed to the IntersectionObserver, and defaults to [0, 1] (when the animation appears on screen - transition).