Lottie vs Rive vs Video for a Splash Screen Animation
By the Charmotion team · Updated
For the OS splash itself, only Android's AnimatedVectorDrawable can animate; the iOS launch screen stays static. For the intro on your first screen, Lottie suits a linear vector animation you already have, Rive suits an intro that hands off to an interactive mascot, and transparent video suits detailed 3D or raster icons. All of them need the same static-to-animated handoff.
Key takeaways
- Nothing but an AVD animates inside a system splash, and only on Android 12+.
- Lottie and video report when they finish; a Rive state machine only reports what its author built in.
- Rive wins when the launch character keeps living in the app afterwards.
- Video wins for 3D, gradient and photographic icons; HEVC alpha for Apple, VP9 alpha for Chrome.
- Charmotion exports Rive and video formats, not Lottie or AVD.
Which formats can play where on launch?
| Format | System splash | First-screen intro | Reacts after launch | 3D or raster art | Knows when it ends |
|---|---|---|---|---|---|
| AnimatedVectorDrawable | Android 12+ only | Android only | No | No | Fixed length |
| Lottie | No | Yes (library) | Limited (segments, markers) | Poorly | Completion callback |
| Rive | No | Yes (runtime) | Yes (state machine) | Embedded images only | Only if the file fires an event |
| Transparent video (HEVC MOV, VP9 WebM) | No | Yes | No | Yes | Player end event |
| Opaque MP4 | No | Yes, on a matching color | No | Yes | Player end event |
The iOS launch screen accepts no animated format at all: a launch storyboard may use only standard UIKit classes, with no custom classes or code connections (Apple Developer Documentation). On Android, the system splash only animates an AVD (Android Developers). Every other format plays in your first screen.
When is Lottie the right choice for a splash intro?
When a designer has already made the intro in After Effects and it plays straight through. Lottie is vector, small for simple shapes, and every runtime tells you when it finishes: LottieView on iOS has an animationDidFinish modifier (lottie-ios), and Android's LottieAnimationView accepts animator listeners (lottie-android). That makes timing the handoff trivial.
The limits show after launch. If the same character should idle, show loading or celebrate later, Lottie means separate files or segments with your code choosing between them, and transitions between them cut. Complex 3D or raster artwork also does not suit it.
For the general format comparison beyond splash screens, see Rive vs Lottie, and for cross-platform specifics, Lottie vs Rive in React Native and Flutter.
When is Rive the better choice?
When the launch intro is the first appearance of a character that keeps working in the app. One .riv file can hold the intro, an idle loop, loading and reactions, and a state machine moves between them from any frame. The intro ends on idle, and the same view can switch to a loading mood the moment the first request starts.
Two practical notes:
- Ending. A state machine only reports events its author added. Check the file: if it has no end event, wait for the intro's length with a timer instead of waiting for a callback.
- Setup. Rive needs its runtime in your app; in Expo that means a development build rather than Expo Go (Rive).
When should you use video for the splash intro?
When the icon is detailed: glossy 3D, mesh gradients, lettering, photographic texture. Video reproduces every pixel and costs no rendering work beyond decoding. For transparency over your background, Apple platforms support HEVC with alpha (WWDC19) and Chrome supports VP9 with alpha in WebM (Chrome for Developers).
The simplest robust option on every platform is an opaque clip whose background is exactly your splash color: no alpha support to worry about, and the seam is invisible as long as the hex values match. The trade-offs are file size and the lack of interaction: the clip plays, ends and is done.
Should you use an AnimatedVectorDrawable at all?
Yes, but only for its one job: the Android 12+ system splash. Keep it short (Google recommends no more than 1,000 ms) and simple, since it animates vector paths and groups, not detailed art. It shows as a still icon below Android 12, even with the compat library (androidx reference).
The strongest Android launch combines two formats: a small AVD pop-in in the system splash, then the full intro in Rive or video on the first screen, on the same background. Details in the Android splash screen animated icon guide.
Which of these formats does Charmotion export?
To be direct: Charmotion exports Rive and video, and does not export Lottie JSON, dotLottie or AnimatedVectorDrawable XML. From one image of your icon or mascot you get a .riv with LaunchStateMachine (2.6-second intro, no end event), CharacterViewModelMachine and CharacterStateMachine for in-app states, plus MP4 at 1080×1080, a 9:16 launch video, GIF, transparent VP9 WebM and HEVC MOV, and web, React and SwiftUI code. All of it comes with the paid plans.
If your stack requires Lottie, or you need an AVD for the Android system splash, those come from a different tool or a designer. The handoff advice in this guide applies either way.
Frequently asked questions
Is Rive or Lottie lighter for a splash animation?
It depends on the artwork more than the format. Simple vector shapes are small in both. Rive's advantage is that one file can also hold your idle and loading states, so you avoid shipping several Lottie files. Measure your actual exports rather than relying on general ratios.
Can I use a transparent video as a splash screen on Android?
Not in the system splash, which only animates an AnimatedVectorDrawable. On your first screen you can play video; an opaque clip on the same background color is the most dependable choice, because the seam stays invisible without any alpha support.
Does Charmotion export Lottie for splash screens?
No. Charmotion exports Rive files, MP4, a 9:16 launch video, GIF, transparent WebM and HEVC MOV, and code samples. It does not export Lottie or AnimatedVectorDrawable. Its launch intro plays on your first screen after a static launch screen.
Quick answers from this guide
Sources
- Specifying your app's launch screen, Apple Developer Documentation
- Splash screens, Android Developers
- SplashScreen (androidx.core:core-splashscreen), Android Developers
- lottie-ios, Airbnb on GitHub
- lottie-android, Airbnb on GitHub
- Adding Rive to Expo, Rive
- HEVC Video with Alpha (WWDC19), Apple Developer
- Alpha transparency in Chrome video, Chrome for Developers