> ## Documentation Index
> Fetch the complete documentation index at: https://rive.app/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Animation Playback

> ⚠️ DEPRECATED: Use State Machines instead of direct animation playback at runtime

> [!WARNING]
>
> **DEPRECATION NOTICE:** This entire page documents the legacy Animation
> Playback system. **For new projects:** Use [State Machines](https://rive.app/docs/runtimes/react-native/state-machines.md) 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.**

Rive lets you specify what animations and state machines to mix and play and control the play/pause state of each animation.

The term *animations* may collectively refer to both animations and state machines. In this section, we explore how to deal with specific animation playback, rather than state machines.

> [!NOTE]
>
> 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.

> [tab] New Runtime (Recommended)
>
> > [!NOTE]
> >
> > The new runtime only supports state machine playback, and not direct animation playback.

> [tab] Legacy Runtime
>
> Currently, with the React Native runtime, you can set one animation to autoplay at the start. Despite this, see below in the playback sections to see how you can mix multiple animations on playback functions.
>
> ```javascript theme={null}
> export default function App() {
>   return (
>     <View>
>       <Rive
>         resourceName="truck_v7"
>         artboardName="Jeep"
>         autoplay
>         animationName="idle"
>       />
>     </View>
>   );
> }
> ```

## Controlling playback

Playback of each animation and state machine can be separately controlled. You can play and pause playback using the `play` , `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.

> [tab] New Runtime (Recommended)
>
> #### Invoking Playback Controls
>
> The new runtime uses the `useRive` hook to access the Rive instance for controlling playback: `play` and `pause`.
>
> ```javascript theme={null}
> export default function PlaybackExample() {
>   const { riveViewRef, setHybridRef } = useRive();
>   const { riveFile } = useRiveFile(require('../../assets/rive/rewards.riv'));
>
>   const play = () => {
>     riveViewRef?.play();
>   };
>
>   const pause = () => {
>     riveViewRef?.pause();
>   };
>
>   return (
>     <View style={styles.container}>
>       <View style={styles.riveContainer}>
>         {riveFile ? (
>           <RiveView
>             file={riveFile}
>             hybridRef={setHybridRef}
>             autoPlay={true} // Automatically starts the state machine
>             style={styles.rive}
>           />
>         ) : null}
>       </View>
>       <Button onPress={play} title="Play" />
>       <Button onPress={pause} title="Pause" />
>     </View>
>   );
> }
> ```

> [tab] Legacy Runtime
>
> #### Invoking Playback Controls
>
> To trigger animation playback controls, set a `ref` on the Rive component rendered. Once the `ref` is populated, you can trigger functions such as `play`, `pause`, etc. See the `ref` method docs for React Native [Rive Ref Methods](https://rive.app/docs/runtimes/react-native/rive-ref-methods.md).
>
> ```javascript theme={null}
> import Rive, { RiveRef } from 'rive-react-native'
>
> export default function App() {
>   const riveRef = React.useRef<RiveRef>(null);
>
>   const handlePlayPress = () => {
>     riveRef?.current?.play();
>   };
>
>   const handlePausePress = () => {
>     riveRef?.current?.pause();
>   };
>
>   return (
>     <View>
>       <Rive
>         resourceName="truck_v7"
>         animationName="idle"
>         ref={riveRef}
>       />
>       <Button onPress={handlePlayPress} title="play" />
>       <Button onPress={handlePausePress} title="pause" />
>     </View>
>   );
> }
> ```