Lottie for App Onboarding, Splash Screens, and Empty States

These three UI moments are where Lottie animation gets used the most in real products — and also where it's easiest to accidentally make the experience worse instead of better.

Splash screens: fast, and never load-bearing

A splash screen animation should be short — well under two seconds — and should never be the thing your app is "waiting on" before it's usable. If your actual app data loads faster than the splash animation finishes, don't artificially extend the animation to fill the time; end it early or crossfade out as soon as the app is ready. Treat the animation as decoration layered on top of the real loading state, not a replacement for one.

Onboarding: one file, segmented per step

For a multi-step onboarding carousel, it's usually better to build one Lottie file with a distinct frame range per step than to ship a separate file for each screen. You load once, and each "next" tap calls playSegments for that step's range — fewer network requests, and the transition between steps can be animated too instead of hard-cutting between separate files.

const stepSegments = [
  [0, 40],   // step 1
  [40, 90],  // step 2
  [90, 150], // step 3
];

function goToStep(index) {
  animation.playSegments(stepSegments[index], true);
}

Empty states: subtle, not attention-seeking

An empty inbox, an empty search result, a completed to-do list — these are good places for a small looping animation because it softens what would otherwise be a blank, dead-looking screen. But because it may sit on screen and loop indefinitely while a user reads or thinks, keep the file small and the motion subtle; a busy, attention-grabbing loop in an empty state competes with whatever the user does next instead of quietly filling space.

The general rule

Animation should mark a meaningful transition or state change — app ready, step complete, nothing here yet — not decorate every screen by default. Reserving it for moments that matter is also what keeps it feeling delightful instead of becoming visual noise a returning user learns to tune out.