DEPRECATION NOTICE: This entire page documents the legacy Animation
Playback system. For new projects: Use State
Machines instead. For existing projects: Plan
to migrate from direct animation control to State Machines as soon as
possible. This content is provided for legacy support only.
If you are trying to coordinate multiple animations’ playback at runtime,
consider using a state machine instead to do this for you!
Choosing starting animations
Starting animations can also be chosen when Rive is instantiated. The first animation on the artboard may play if one is not provided, or a state machine is not set.- Web
- React
- React Native
- Flutter
- Apple
- Android
Controlling playback
Playback of each animation and state machine can be separately controlled. You can play and pause playback using theplay
, pause
and stop
methods, either passing in the names of the animations you want to affect or passing in nothing which will affect all instanced animations.
- Web
- React
- React Native
- Flutter
- Apple
- Android
Invoking Playback Controls
With the web runtime, you can provide callback functions to receive notification when certain animation events have occurred:onLoad
when a rive file has been loaded and initialized; it’s now ready for playbackonPlay
when one or more animations play; provides a list of animationsonPause
when one or more animations pause; provides a list of animationsonStop
when one or more animations are stopped; provides a list of animationsonLoop
when an animation loops; provides the animation name