Short answers to common animation questions.
Each answer is the short version; follow the link for the full guide with examples and sources.
Rive & state machines
What is Rive?
Rive is an interactive animation tool with open-source runtimes for web, React, iOS, Android, Flutter and React Native. Animations export as one .riv file that can contain a state machine, so the same file switches between idle, success, error and other states when your app code changes its inputs.
Read the guide: What Is Rive? Interactive Animation Explained
Is Rive free?
Partly. The Rive runtimes that play .riv files are MIT-licensed and free for commercial apps. The Rive editor has a free plan, but its exports play a Rive splash screen; paid plans remove it, and video export from the editor is a paid feature. Check rive.app/pricing for current prices.
Read the guide: What Is Rive? Interactive Animation Explained
What is the difference between Rive and Lottie?
Lottie plays After Effects animations exported as JSON with Bodymovin, or packaged as .lottie; Rive animations are made in the Rive editor and exported as binary .riv files. Both support interactivity now: Lottie Creator added dotLottie state machines in 2025, while the state machine is built into Rive's format.
What is a Rive state machine?
A Rive state machine is logic inside the .riv file that connects animation states with transitions. Your app sets values, either inputs or data-bound view model properties, and the state machine decides which animation plays and how it blends, so one file can cover idle, talking, success and error.
Read the guide: Rive State Machine: Inputs, Triggers & Moods
What is the difference between a trigger and a number input in Rive?
A number input holds a value the state machine keeps reading, which suits choosing a looping mood such as idle or loading. A trigger has no stored value; you call fire() once for a momentary reaction such as success, error or a wave. Booleans are the third input type.
Read the guide: Rive State Machine: Inputs, Triggers & Moods
Are Rive state machine inputs deprecated?
Yes. Rive now recommends Data Binding with view models for new work, but existing files and inputs keep working on web, React, Android and Flutter. The editor can convert inputs to view models. On Apple platforms, inputs work only in the legacy runtime; the new Apple runtime supports data binding only.
Read the guide: Rive State Machine: Inputs, Triggers & Moods
Which Rive web package should I use?
Rive recommends @rive-app/webgl2 for most web projects because it uses the Rive Renderer. @rive-app/canvas draws with Canvas2D, does not yet support vector feathering, and avoids the browser's WebGL context limit. Both expose the same API, so switching later only means changing the import.
How do I change a Rive state in React?
Load the file with useRive. With legacy inputs, call useStateMachineInput(rive, "State Machine 1", "mood"), then set .value or call .fire(). With data binding, pass autoBind: true and use useViewModelInstanceNumber or useViewModelInstanceTrigger. Rive recommends data binding for new code.
How do I set a Rive input in SwiftUI?
On the legacy Apple runtime, create a RiveViewModel and call setInput("mood", value: 3.0) for numbers or booleans and triggerInput("success") for triggers. The new Apple runtime does not support inputs; it uses data binding instead. Both runtimes ship in the same RiveRuntime package, which supports iOS 14 and later.
Which Rive package should I use for React Native?
Use the Nitro-based runtime, installed with npm install @rive-app/react-native react-native-nitro-modules. The older rive-react-native package is deprecated. Its state machine input methods log warnings from v0.5 and are removed in v0.6, so plan to move that code to data binding before you upgrade.
Mascots in your product
What states should an app mascot have?
Most apps are covered by a looping idle plus a few context loops, such as loading or thinking during waits, listening and talking for assistants, and sleeping for empty or inactive screens. Add short one-shot reactions for success, error, yes, no, enter and exit. Keep loops subtle and reactions brief.
Read the guide: Mascot Animation States: Loading, Success, Error
What is the difference between a looping and a one-shot animation?
A looping animation repeats for as long as a state is active, such as idle, loading or listening. A one-shot plays once in response to an event, such as success or error, and then returns to the current loop. In Rive, loops are usually chosen with a number input and one-shots with triggers.
Read the guide: Mascot Animation States: Loading, Success, Error
What states does an AI assistant avatar need?
At minimum: idle, listening while the user speaks or types, thinking while the model works, and talking while it answers, plus a resting state. Vercel's AI SDK Elements Persona component, built with Rive, uses idle, listening, thinking, speaking and asleep. Add success and error reactions for actions the assistant completes.
Read the guide: Animate an AI Assistant: Listening & Talking
How does Duolingo animate its characters?
Duolingo uses Rive. Its 2022 engineering post explains that Rive's state machine let the app choose animation states in code, syncing characters' mouth shapes to audio and reacting to learners in real time. The team wrote that the state machine is what made the project feasible at scale.
Can an animated mascot replace a loading spinner?
Yes, for short waits. A loading mascot is a looping indicator, which Nielsen Norman Group recommends for waits of about 2–10 seconds. For 10 seconds or more, show a percent-done progress bar, because a loop cannot say how much work is left. Under about a second, show no indicator.
What does a Charmotion animation set include?
A Charmotion set has 17 animations of your character: ten loops chosen with a mood number from 0 to 9, six one-shot triggers (success, error, yes, no, enter, exit) and a launch intro. All 17 ship in one .riv of about 35–45 KB, plus video exports and paste-ready code.
Read the guide: Mascot Animation States: Loading, Success, Error
How long does a Charmotion animation set take?
Usually one to two hours. You upload a character, mascot or logo, or describe one and have it designed by AI on paid plans, and Charmotion produces all 17 animations: ten mood loops, six one-shot reactions and a launch intro, delivered as a Rive file plus video formats and code.
Logo animation
Can I animate an AI-generated logo?
Yes. Raster logos, including AI-generated, 3D or text-heavy ones, can be animated by moving and deforming the original image instead of redrawing it as vectors. Charmotion's motion mode works this way: it keeps the artwork's own pixels and adds squash, stretch, tilts and reactions. Uploads are never used to train AI.
Read the guide: How to Animate a Logo From a PNG or AI Image
What format should an animated logo use on a website?
For a decorative transparent loop, use an HEVC-alpha .mov followed by a VP9-alpha WebM in one muted, autoplaying video element. For a logo that reacts to hover or clicks, use a Rive file. Avoid GIF for logos with soft edges, because GIF transparency is all-or-nothing.
Read the guide: How to Animate a Logo From a PNG or AI Image
Can you animate the iOS launch screen?
No. The iOS launch screen is a static Info.plist configuration or storyboard that cannot use custom classes, runtime attributes or code connections. Apple says it should look nearly identical to your first screen. Play a branded intro animation in your first in-app view, after launch completes, instead.
What should an iOS launch screen look like?
Apple's Human Interface Guidelines say a launch screen should be nearly identical to your app's first screen, avoid text, and not act as a splash screen or branding moment. If you want a splash or logo animation, Apple suggests showing it at the start of onboarding, once launching completes.
How long should an Android splash screen animation be?
Google recommends not exceeding 1,000 ms on phones for the Android 12+ animated splash icon, and any delayed start cannot exceed 166 ms. It is a recommendation, not a hard limit. If your app takes longer than a second to start, use a looping animation. The icon can be an AnimatedVectorDrawable.
What size is the Android 12 splash screen icon?
With an icon background, the splash icon is 240×240 dp and must fit inside a 160 dp circle. Without a background, it is 288×288 dp and must fit inside a 192 dp circle. Keep your logo inside that circle, because anything outside it is masked. Older Android versions are backported by androidx.core:core-splashscreen.
Formats & transparent video
Does Safari support transparent WebM?
No. Safari plays WebM video but drops the VP9 alpha channel, so transparent areas render opaque. As of October 2026, the WebKit patch for VP9 alpha (bug 275908, pull request #64837) is still open. Serve HEVC with alpha in a .mov to Safari and VP9 WebM to Chrome, Edge and Firefox.
Read the guide: Transparent Video on Websites (Safari Included)
How do I add a transparent video to a website?
Use one <video autoplay muted loop playsinline> element with two sources: an HEVC-alpha .mov first, typed video/quicktime; codecs="hvc1.1.6.H120.b0", then a VP9-alpha WebM. Order matters because Safari can play VP9 but ignores its transparency, so it must find the HEVC file first.
Read the guide: Transparent Video on Websites (Safari Included)
What is HEVC with alpha?
HEVC with alpha is Apple's extension of H.265 video that stores a transparency channel. Playback is supported on iOS 13+, tvOS 13+ and macOS Catalina+, including Safari. You can encode it with AVFoundation or VideoToolbox, or with ffmpeg's hevc_videotoolbox encoder on a Mac.
Read the guide: Transparent Video on Websites (Safari Included)
Can an MP4 have a transparent background?
A standard H.264 MP4 cannot store transparency. For transparent video on the web, use VP9 WebM for Chrome, Edge and Firefox and HEVC with alpha for Safari and Apple apps. ProRes 4444 also carries alpha, but it is an editing format and too large to serve on web pages.
Read the guide: Transparent Video on Websites (Safari Included)
Why won't my video autoplay on iPhone?
iOS Safari autoplays only video that is muted or has no audio track and is visible on screen, and iPhone needs the playsinline attribute to play inline instead of fullscreen. Use <video autoplay muted loop playsinline> and handle the Promise from play() in case playback is refused.
Read the guide: Transparent Video on Websites (Safari Included)
Why is GIF bad for web animation?
GIF uses an indexed palette of at most 256 colors and only all-or-nothing transparency, so gradients band and edges look jagged. It is also heavy: in a web.dev example, a 3.7 MB GIF became a 551 KB MP4 and a 341 KB WebM with the same content.
How do I make a video behave like a GIF?
Use <video autoplay loop muted playsinline> with WebM and MP4 sources. Those attributes make it start on load, repeat forever, stay silent and play inside the page on iPhone, matching GIF behavior at a fraction of the size. Muted autoplay is always allowed in Chrome.
What file formats does a Charmotion set include?
A full set includes one .riv with all 17 animations, a 1080×1080, 60 fps MP4 per animation, a 9:16 launch MP4, 480 px GIFs, transparent WebM (VP9 alpha) and MOV (HEVC alpha), and web, React and SwiftUI code. Starter covers MP4 and GIF; Studio includes every format.
Animation UX & accessibility
What is prefers-reduced-motion?
prefers-reduced-motion is a CSS media feature that reports whether the user asked the OS to minimize motion, with the values no-preference and reduce. It has been widely supported since January 2020. Use it to swap large movement and loops for a static pose or a gentle fade.
How do I detect Reduce Motion in SwiftUI?
Read @Environment(\.accessibilityReduceMotion) var reduceMotion. When it is true, show a static pose or a fade instead of looping character motion. It reflects the user's Reduce Motion setting under Settings, Accessibility, Motion. On the web, Safari exposes the same setting through prefers-reduced-motion.
What is WCAG 2.3.3 Animation from Interactions?
SC 2.3.3 is a Level AAA criterion: motion animation triggered by user interaction must be possible to disable, unless it is essential. Honoring prefers-reduced-motion is the common way to meet it. AAA is rarely required, but it is good practice for mascots that bounce or slide on tap.
How many times can an animation flash per second?
No more than three times in any one-second period, under WCAG 2.2 SC 2.3.1 (Level A), unless the flashes stay below the general and red flash thresholds. Rapid flashing can trigger seizures in people with photosensitive epilepsy, so keep blinks slow in error and attention animations.
How long should UI animations be?
Most mobile UI transitions should take about 200–300 ms. Material Design suggests about 225 ms for elements entering, 195 ms for leaving and about 375 ms for large full-screen transitions, and warns that over 400 ms may feel slow. Longer movement across more area deserves a longer duration.
When should I use a spinner vs a progress bar?
Use a looping indicator, such as a spinner or animated mascot, for waits of about 2–10 seconds, and a percent-done progress bar for 10 seconds or more. Nielsen Norman Group advises no indicator for actions under about one second, where immediate visual feedback is enough.
What are the 0.1, 1 and 10 second response time limits?
They are Jakob Nielsen's limits: 0.1 second feels instantaneous, 1 second keeps the user's flow of thought uninterrupted, and 10 seconds is about the limit for keeping attention on the task. Past roughly 10 seconds, show progress so users know the system has not frozen.