Character animation for apps and websites, explained.
Practical guides on Rive state machines, animated mascots, logo animation and transparent video — illustrated with real output from our engine. Short on time? Read the quick answers or the glossary.
Rive & state machines
What Rive is, how state machines switch animations, and how to drive them from React, SwiftUI and Flutter.
-
What Is Rive? Interactive Animation Explained
Rive is an interactive animation editor plus open-source runtimes. Learn what a .riv file is, which platforms play it, what it costs and how big the runtime is. -
Rive vs Lottie: Which to Use in 2026
Rive vs Lottie compared honestly: how each is made, state machines and interactivity, file size claims, runtimes, and when to choose one over the other. -
Rive State Machine: Inputs, Triggers & Moods
How a Rive state machine switches animations: number, boolean and trigger inputs, loops vs one-shots, the move to data binding, and code for both styles. -
How to Use Rive in React and Next.js
Use Rive in React and Next.js: pick a package, render with useRive, change states with inputs or data binding, fix window is not defined, honor reduced motion. -
How to Use Rive in SwiftUI (iOS)
Use Rive in SwiftUI: install RiveRuntime, new vs legacy Apple runtime, show a .riv, set inputs or fire triggers, use data binding and honor Reduce Motion. -
Rive in Android, Flutter & React Native
Add Rive to Android, Flutter and React Native: current packages, install lines, setting a number or firing a trigger, and what changed with data binding.
Mascots in your product
Where an animated mascot earns its place: loading, empty states, success, errors, onboarding and AI assistants.
-
How to Make an Animated Mascot for Your App
Design a mascot that animates well, pick the states your app needs, and choose between an animator, Rive, Lottie or an automated service. A practical guide. -
Mascot Animation States: Loading, Success, Error
Which mascot states an app needs (loading, empty, success, error, greeting, notification), loops vs one-shots, timing, and how to map app events to them. -
Animate an AI Assistant: Listening & Talking
Give an AI chatbot or voice assistant an animated avatar: idle, listening, thinking and talking states mapped to chat events, latency and reduced motion. -
App Launch & Splash Screen Animation Guide
Why the iOS launch screen must be static, how the Android 12 SplashScreen API animates, how long a launch animation should be, and how to hand off to an intro.
Logo animation
Turning an existing logo — including an AI-generated one — into motion for your site, app and videos.
Formats & transparent video
WebM, MOV with alpha, MP4, GIF and Rive: which file to ship where, and the markup that works everywhere.
-
Transparent Video on Websites (Safari Included)
How to put a transparent video on a website that works in Chrome, Firefox, Edge and Safari: VP9 alpha WebM, HEVC alpha MOV, the markup, encoding and autoplay. -
GIF vs WebM vs MP4 vs Lottie vs Rive
Compare GIF, WebM, MP4, Lottie and Rive by transparency, interactivity, file size and support, and learn which animation format to ship for web, apps and email.
Animation UX & accessibility
Timing, reduced motion and the WCAG rules that keep animation helpful instead of distracting.
-
Accessible Animation: Reduced Motion & WCAG
How to respect prefers-reduced-motion in CSS, JavaScript, Rive and SwiftUI, and what WCAG 2.2 requires for looping, interactive and flashing animation. -
Animation Durations & Loading UX Guidelines
How long UI animations should last, what the 0.1 s, 1 s and 10 s limits mean, and when to use a spinner, a progress bar or a loading animation in your app.