rive-interactive

Rive Interactive - State Machine-Based Vector Animation

Overview

Rive is a state machine-based animation platform that enables designers to create interactive vector animations with complex logic and runtime interactivity. Unlike timeline-only animation tools (like Lottie), Rive supports state machines, input handling, and two-way data binding between application code and animations.

Key Features:

• State machine system for complex interactive logic
• ViewModel API for two-way data binding
• Input handling (boolean, number, trigger inputs)
• Custom events for animation-to-code communication
• Runtime property control (colors, strings, numbers, enums)
• Cross-platform support (Web, React, React Native, iOS, Android, Flutter)
• Small file sizes with vector graphics

When to Use This Skill:

• Creating UI animations with complex state transitions
• Building interactive animated components (buttons, toggles, loaders)
• Implementing game-like UI with state-driven animations
• Binding real-time data to animated visualizations
• Creating animations that respond to user input
• Working with designer-created animations requiring runtime control

Alternatives:

• Lottie (lottie-animations): For simpler timeline-based animations without state machines
• Framer Motion (motion-framer): For code-first React animations with spring physics
• GSAP (gsap-scrolltrigger): For timeline-based web animations with precise control

Core Concepts

1. State Machines

State machines define animation behavior with states and transitions:

• States: Different animation states (e.g., idle, hover, pressed)
• Inputs: Variables that control transitions (boolean, number, trigger)
• Transitions: Rules for moving between states
• Listeners: React hooks to respond to state changes

2. Inputs

Three input types control state machine behavior:

• Boolean: On/off states (e.g., isHovered, isActive)
• Number: Numeric values (e.g., progress, volume)
• Trigger: One-time events (e.g., click, submit)