Complete Guide to Rive State Machine Integration

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

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

1. Designers create the animation in Rive Editor with State Machine nodes.
2. Export the .riv file and host it on your server (e.g., /animations/button.riv).
3. Install the Rive runtime: npm install @rive-app/react-canvas or @rive-app/react-webgl2.
4. Use useRive hook to load the animation and bind State Machine inputs.
5. Connect JavaScript events (hover, click) to boolean/number/trigger inputs.
6. 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.

// 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

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.