What is Rive State Machine and How It Makes Animations Interactive
You launch a landing page with a loading animation that should react to progress. Lottie isn't suitable—you need to change state in response to clicks. The best solution is Rive with State Machine. A typical task: a 'Send' button with feedback—first it blinks, then shows a spinner, then a success checkmark. In CSS/JS, this takes dozens of lines of code and timing synchronization. Rive with State Machine lets designers embed transition logic, and developers control it from JavaScript.
We have been using Rive in commercial projects for several years—over 20 successful integrations. This saves development time by up to 60% compared to writing animations in CSS/JS. The Rive runtime is ~40 KB gzip (per Rive documentation) versus ~150 KB gzip (per Lottie documentation) for Lottie, giving a page load speed advantage and improving Core Web Vitals. Rive also supports RiveEvent for code feedback (e.g., listening for animation completion and sending analytics). State Machine supports up to 16 inputs, enabling complex interaction scenarios.
Rive vs Lottie: Key Differences
| Feature | Rive | Lottie |
|---|---|---|
| Animation Type | Interactive (State Machine) | Linear (playback) |
| Rendering | WebGL / Canvas 2D (GPU) | Canvas 2D (CPU) |
| Runtime Size | ~40 KB gzip (per Rive documentation) | ~150 KB gzip (per Lottie documentation) |
| JS Control | Inputs (boolean, number, trigger) | Only play/pause/seek |
| Events | Yes (RiveEvent) | No |
If your project requires animations that react to user actions (e.g., a button with feedback during loading), Rive is the better choice. It gives full control over animation behavior via JavaScript, not just 'loop a segment'.
Benefits of Rive for Interactive Animations
Interactive animations with State Machine unlock capabilities unavailable in Lottie: reacting to hover, click, data input. Rive supports three input types (Boolean, Number, Trigger), allowing you to tie animation to any event. For example, a progress bar can display the actual loading percentage, and at 100% trigger a completion trigger. In our experience, using Rive instead of custom CSS animations reduces development time for interactive elements by 50–70%.
How to Control Animations via State Machine: Step-by-Step
- Designers create the animation in Rive Editor with State Machine nodes.
- Export the .riv file and host it on your server (e.g.,
/animations/button.riv). - Install the Rive runtime:
npm install @rive-app/react-canvasor@rive-app/react-webgl2. - Use
useRivehook to load the animation and bind State Machine inputs. - Connect JavaScript events (hover, click) to boolean/number/trigger inputs.
- Optionally listen to RiveEvent for animation completion or user interaction within the animation.
Integration with React: Practical Examples
Basic Component
// components/RiveAnimation.tsx
'use client'
import { useRive, Layout, Fit, Alignment } from '@rive-app/react-canvas'
interface RiveAnimationProps {
src: string
stateMachine?: string
animation?: string
className?: string
}
export function RiveAnimation({
src,
stateMachine,
animation,
className,
}: RiveAnimationProps) {
const { RiveComponent } = useRive({
src,
stateMachines: stateMachine ? [stateMachine] : undefined,
animations: animation ? [animation] : undefined,
autoplay: true,
layout: new Layout({
fit: Fit.Contain,
alignment: Alignment.Center,
}),
})
return <RiveComponent className={className} />
}
Interactive Button with State Machine
// components/InteractiveButton.tsx
'use client'
import { useRive, useStateMachineInput } from '@rive-app/react-canvas'
export function RiveButton() {
const { RiveComponent, rive } = useRive({
src: '/animations/button.riv',
stateMachines: 'ButtonSM',
autoplay: true,
})
const isHoverInput = useStateMachineInput(rive, 'ButtonSM', 'isHover')
const isPressedInput = useStateMachineInput(rive, 'ButtonSM', 'isPressed')
const isLoadingInput = useStateMachineInput(rive, 'ButtonSM', 'isLoading')
const handleClick = async () => {
if (isLoadingInput) isLoadingInput.value = true
await fetch('/api/action')
if (isLoadingInput) isLoadingInput.value = false
}
return (
<button
className="relative w-48 h-14"
onMouseEnter={() => isHoverInput && (isHoverInput.value = true)}
onMouseLeave={() => isHoverInput && (isHoverInput.value = false)}
onMouseDown={() => isPressedInput && (isPressedInput.value = true)}
onMouseUp={() => isPressedInput && (isPressedInput.value = false)}
onClick={handleClick}
>
<RiveComponent />
</button>
)
}
Controlling Numeric Inputs
State Machine supports three input types: Boolean (hover, active), Number (progress, speed), Trigger (one-time event — click, success).
// components/ProgressRive.tsx
'use client'
import { useRive, useStateMachineInput } from '@rive-app/react-canvas'
interface ProgressRiveProps {
progress: number // 0–100
}
export function ProgressRive({ progress }: ProgressRiveProps) {
const { RiveComponent, rive } = useRive({
src: '/animations/progress.riv',
stateMachines: 'ProgressSM',
autoplay: true,
})
const progressInput = useStateMachineInput(rive, 'ProgressSM', 'progress')
const completeTrigger = useStateMachineInput(rive, 'ProgressSM', 'complete', false)
if (progressInput) progressInput.value = progress
if (progress >= 100 && completeTrigger) completeTrigger.fire()
return <RiveComponent style={{ width: 300, height: 80 }} />
}
Rive can also send events to JavaScript (e.g., on animation completion or element click) via subscription to EventType.RiveEvent.
Performance Optimization of Rive Animations
When integrating, choose the right renderer: WebGL for complex scenes with many objects, Canvas 2D for simple animations. WebGL uses GPU, reducing CPU load. We recommend lazy loading .riv files and unloading animations when not in viewport. In our projects, we use IntersectionObserver and ResizeObserver for retina adaptation.
Low-Level Canvas for Maximum Control
If you need multiple Rive instances or a custom render loop, use the low-level runtime.
// components/LowLevelRive.tsx
'use client'
import { useEffect, useRef } from 'react'
import Rive, { Fit } from '@rive-app/canvas'
export function LowLevelRive({ src }: { src: string }) {
const canvasRef = useRef<HTMLCanvasElement>(null)
useEffect(() => {
if (!canvasRef.current) return
const r = new Rive({
canvas: canvasRef.current,
src,
autoplay: true,
onLoad: () => {
r.resizeDrawingSurfaceToCanvas()
},
})
const observer = new ResizeObserver(() => {
r.resizeDrawingSurfaceToCanvas()
})
observer.observe(canvasRef.current)
return () => {
r.cleanup()
observer.disconnect()
}
}, [src])
return (
<canvas
ref={canvasRef}
style={{ width: '100%', height: '100%' }}
/>
)
}
Workflow and Timelines
| Stage | Timeline |
|---|---|
| Playing a ready .riv | 2–3 hours |
| State Machine + inputs integration | 1–2 working days |
| Creating the .riv file (if not provided) | Separate designer task |
Integration cost is calculated individually based on animation complexity and State Machine logic. Typical budget for integration starts at $500 and can go up to $2000 for complex state machines.
What's Included in Our Rive Integration Service
When you order Rive integration from us, you get:
- Full setup and configuration of Rive runtime (WebGL or Canvas)
- State Machine input binding (boolean, number, trigger)
- Responsive layout and retina display support
- Performance optimization (lazy loading, canvas cleanup)
- Code documentation and handoff
- 30 days of post-launch support
With over 5 years of experience in animation integration, we have delivered 20+ projects, ensuring high-quality interactive animations. Contact us for a free project evaluation. We'll provide a fixed quote and timeline.
Typical Integration Mistakes
- Wrong fit/alignment — animation may be cropped
- Missing
resizeDrawingSurfaceToCanvas— retina blur - Ignoring RiveEvent — loss of interactivity
We have completed over 20 Rive integrations with guaranteed quality. Let us help you reduce development time and deliver smooth interactive animations.