Creating Rive Animations for Interactive Elements in Mobile Applications
Lottie is for playback. Rive is for interaction. The difference is fundamental: Rive State Machine allows a button to respond to tap, hold, hover, release—each transition with its own animation. A checkbox animates on and off, a toggle responds to drag in real time. All without a single line of animation code in your app—just pass inputs to the State Machine.
State Machine as the Core of Interactivity
Rive Editor provides a State Machine with a graphical editor for states and transitions. For an interactive element, this looks like:
Button with tap animation:
- State:
idle→ quiet state animation (can be idle loop) - State:
hovered→ subtle highlight or scale 1.02 - State:
pressed→ scale down 0.96 + color change - State:
disabled→ fade to 40% opacity
Transitions between states are managed by Boolean or Trigger inputs. isHovered: Bool, isPressed: Bool. Transition conditions: when isHovered = true, move to hovered. In app runtime on onTouchDown → setInput("isPressed", value: true), on onTouchUp → false.
Transitions in Rive have Duration and Easing—the transition animation is built into the State Machine, no additional code configuration needed.
Which Elements to Make in Rive
Toggle/Switch: two states with physically-felt animation. The circle moves with spring easing, background changes color. Drag gesture can map to Number input—users literally drag the toggle, and animation follows their finger.
Checkbox: checked/unchecked with a drawn checkmark, intermediate state for indeterminate. Shape morphing in Rive works via mesh—the checkbox border smoothly deforms on tap.
Loading indicator: not just a spinner but contextual: a progress bar that via Number input shows real download progress. At 100%, transitions to success state with celebration animation.
Bottom sheet handle: responds to drag. With yPosition input, updates in real time via gesture recognizer—the handle stretches, indicating movement direction.
Like / Favorite button: idle → pressed (burst effect) → liked state. Trigger tap launches a one-time burst animation, Boolean isLiked manages the final state.
Creating in Rive Editor
Work with vector shapes directly in Rive Editor (browser or desktop beta). Set Artboard size exactly to element dimensions—e.g., 44×44 for an icon button.
Name animation clips semantically: idle, press, release, success, error. Each clip is a separate timeline. Create State Machine in a separate tab.
Declare inputs upfront and document them: their names will be used in app code. Typos are silent bugs: State Machine doesn't react, but doesn't error either.
Blend States are powerful for elements with continuous input. For example, a loading button animation with two progress states: at progress = 0 one animation, at progress = 1 another, between them a smooth blend. Controlled by a single Number input.
Export and Optimization
The .riv file exports from Rive Editor via Export → For runtime. Unlike Lottie JSON, .riv is a binary format, already optimized. Typical sizes: simple button 5–20 KB, complex multi-state indicator 50–150 KB.
If the animation uses raster textures, Rive packs them into .riv. Better to avoid: use vector shapes, runtime will be lighter and more scalable.
One .riv file can contain multiple artboards—e.g., all app buttons in one file. Saves load time but complicates updating individual elements.
Timeline
Creating one interactive element in Rive (button, checkbox, toggle) with State Machine and 2–4 states: 1–2 days including review and revisions. Full set of app UI components (5–10 elements) with a cohesive animation system: 3–5 days. Cost is calculated individually after assessing component count and State Machine complexity.