How to Use Rive

Rive is an animation tool built for interactive, stateful motion. Unlike After Effects or LottieFiles, which focus on timeline-based playback, Rive's core feature is the state machine: a visual system for defining how animations respond to user input in real time.

You build the animation in Rive's editor, export a tiny runtime file, and it plays natively on web, iOS, Android, Flutter, and more. No video files, no GIF sequences, no frame-by-frame rendering.

The Rive editor

Rive runs in the browser at rive.app. The editor has two main modes: Design and Animate.

Design mode is where you build the visual elements. You can draw vector shapes directly, import SVGs from Figma, or use Rive's bone/skeletal system for character rigs. The drawing tools are simpler than Figma's but sufficient for most animation assets.

Animate mode is the timeline editor. Each animation is a separate timeline where you keyframe properties like position, rotation, scale, opacity, and color. You can have multiple animations on the same artboard, like "idle," "hover," and "pressed" states for a button.

The toolbar, layers panel, and properties panel will feel familiar if you've used any design tool. The main difference is the timeline at the bottom, which works like video editing software.

Building your first animation

Start with something small: an animated toggle switch.

Draw two shapes on the artboard: a rounded rectangle (the track) and a circle (the thumb). In Animate mode, create two timelines: "off" and "on."

In the "off" timeline, position the circle on the left side of the track. Set the track color to gray. In the "on" timeline, move the circle to the right and change the track color to green. Add easing to both keyframes so the transition feels smooth.

That's two animations. Now you connect them with a state machine.

State machines are the killer feature

Open the State Machine panel and create a new state machine. Add both animations ("off" and "on") as states. Create a boolean input called "isOn." Draw a transition from "off" to "on" that triggers when isOn becomes true, and a reverse transition for false.

In your app code, you toggle the isOn input when the user taps the switch. Rive handles the transition animation automatically, blending between the two states.

This is why Rive is different from Lottie. A Lottie animation plays forward or backward. A Rive animation responds to inputs, conditions, and logic. You can build hover states, loading sequences, multi-step onboarding animations, and interactive illustrations, all driven by a state machine rather than JavaScript animation code.

State machines can include multiple inputs (booleans, numbers, triggers), nested states, blend states for smooth transitions, and listeners that respond to pointer events directly.

Exporting runtimes for production

Rive exports a .riv file, which is a compact binary format. The file sizes are remarkably small: most animations are 10-50KB, compared to Lottie files that can easily reach 200KB+ for similar complexity.

For web, install the @rive-app/react-canvas package (React) or @rive-app/canvas (vanilla JS). The setup is straightforward:

import { useRive } from '@rive-app/react-canvas';

function AnimatedToggle() {
  const { rive, RiveComponent } = useRive({
    src: '/animations/toggle.riv',
    stateMachines: 'State Machine 1',
    autoplay: true,
  });

  return <RiveComponent style={{ width: 64, height: 32 }} />;
}

For iOS, use the RiveRuntime Swift package. For Android, use the rive-android library. For Flutter, use rive_flutter. Every platform has an official, maintained runtime.

Rive vs. LottieFiles

Use LottieFiles when you need simple, looping animations: loading spinners, success checkmarks, decorative illustrations. Lottie is great for fire-and-forget playback with a massive community library of pre-built animations.

Use Rive when your animation needs to respond to user input, change states based on data, or involve complex multi-step sequences. Rive's state machines handle interactivity that would require custom JavaScript code with Lottie.

Rive files are also significantly smaller. A complex Rive animation is often 5-10x smaller than the equivalent Lottie file because Rive uses a binary format instead of JSON.

Start animating with Rive

Recommended workflow

Design your animation assets in Figma, export them as SVGs, import into Rive, animate on the timeline, wire up the state machine, export the .riv file, and integrate it with the platform runtime.

Rive's free tier includes unlimited files and exports. The paid plans ($14/month) add team features, version history, and increased asset storage. For solo work, the free tier covers everything you need.