Just Fucking Use Lottie

Your product animations are a disaster.

Let's be honest. While Google, Duolingo, and Spotify are shipping buttery-smooth animations that make their apps feel alive, you're still doing this:

Static screens with no personality

Your onboarding is a carousel of screenshots. Your empty states are a sad icon and some text. Your success confirmations are... nothing. Your app feels dead.

GIFs everywhere?

That 2MB tutorial animation? Embarrassing. Your users on mobile are watching it load frame by frame. And it still looks like pixelated garbage on a retina screen.

CSS animations for complex motion?

47 lines of cubic-bezier nonsense. Your designer hands you a beautiful After Effects comp and you spend 3 days trying to recreate it with keyframes. And god forbid they want to change it. Touch grass.

Shipping different animations per platform?

One version for iOS. Another for Android. A third for web. Maintaining three animation codebases because you didn't know there was a better way. That's insane.

What is Lottie?

Lottie is how modern apps ship world-class animations. It's a vector animation format that works everywhere—iOS, Android, web, React Native, Flutter—from a single source file. Your designer creates the animation in After Effects, exports it, and you drop it in with two lines of code. Same animation. Every platform. Pixel perfect.

And it's not just another format—it's an official industry standard. Formally recognized by IANA with an official file extension (.lot) and MIME type (video/lottie+json). The Lottie Animation Community operates under the Linux Foundation with an official v1.0 specification—and the steering committee includes Google, Airbnb, and LottieFiles. This isn't a proprietary format that could disappear tomorrow. It's backed by the companies that use Lottie at massive scale and are invested in its future.

<!-- That's it. That's the whole thing. -->
<script type="module" src="https://unpkg.com/@lottiefiles/dotlottie-wc"></script>

<dotlottie-wc src="animation.lottie" autoplay loop></dotlottie-wc>

Drop in a script tag and you're done. Or use the React, Vue, or Svelte packages if that's your thing. Either way—fucking animations in minutes, not days.

The file size difference is criminal

Lottie is up to 200x smaller. Your users will thank you. Your CDN bill will thank you. Just fucking use Lottie.

Why Lottie?

Because the best product teams in the world already figured this out:

Interactive, not just animated

Lottie isn't just playback. These are live, interactive animations responding to your input right now:

<script
  src="https://unpkg.com/@lottiefiles/dotlottie-wc@0.8.11/dist/dotlottie-wc.js"
  type="module"
></script>

<dotlottie-wc
  id="hover-demo"
  src="animation.lottie"
  loop>
</dotlottie-wc>

<script>
  const anim = document.getElementById('hover-demo');

  anim.addEventListener('mouseenter', async () => {
    const player = await anim.dotLottie;
    if (player) player.play();
  });

  anim.addEventListener('mouseleave', async () => {
    const player = await anim.dotLottie;
    if (player) player.stop();
  });
</script>

<script
  src="https://unpkg.com/@lottiefiles/dotlottie-wc@0.8.11/dist/dotlottie-wc.js"
  type="module"
></script>

<dotlottie-wc
  id="click-demo"
  src="animation.lottie">
</dotlottie-wc>

<script>
  const anim = document.getElementById('click-demo');

  anim.addEventListener('click', async () => {
    const player = await anim.dotLottie;
    if (player) {
      player.stop();
      player.play();
    }
  });
</script>

<canvas id="scroll-canvas"></canvas>

<script type="module">
import { DotLottie } from 'https://esm.sh/@lottiefiles/dotlottie-web';

const canvas = document.getElementById('scroll-canvas');
const player = new DotLottie({
  canvas,
  src: 'animation.lottie',
  autoplay: false,
  loop: false
});

let progress = 0;

window.addEventListener('scroll', () => {
  // Calculate scroll progress (0 to 1)
  const scrollY = window.scrollY;
  const maxScroll = document.body.scrollHeight - window.innerHeight;
  progress = scrollY / maxScroll;

  // Set animation frame based on scroll
  if (player.isLoaded) {
    const frame = Math.round(progress * (player.totalFrames - 1));
    player.setFrame(frame);
  }
});
</script>

<script
  src="https://unpkg.com/@lottiefiles/dotlottie-wc@0.8.11/dist/dotlottie-wc.js"
  type="module"
></script>

<dotlottie-wc
  src="animation.lottie"
  stateMachineId="SM with Segments"
></dotlottie-wc>

// npm install @lottiefiles/dotlottie-web
// Or use CDN: https://esm.sh/@lottiefiles/dotlottie-web

<canvas id="canvas"></canvas>

<script type="module">
  import { DotLottie } from 'https://esm.sh/@lottiefiles/dotlottie-web';

  new DotLottie({
    autoplay: true,
    loop: true,
    canvas: document.getElementById('canvas'),
    src: 'https://lottie.host/animation.lottie'
  });
</script>

// npm install @lottiefiles/dotlottie-react

import { DotLottieReact } from '@lottiefiles/dotlottie-react';

const App = () => (
  <DotLottieReact
    src="animation.lottie"
    loop
    autoplay
  />
);

// npm install @lottiefiles/dotlottie-react-native

import { DotLottie } from '@lottiefiles/dotlottie-react-native';

const App = () => (
  <DotLottie
    source={require('./animation.lottie')}
    style={{ width: 200, height: 200 }}
    loop
    autoplay
  />
);

<!-- npm install @lottiefiles/dotlottie-vue -->

<script setup>
import { DotLottieVue } from '@lottiefiles/dotlottie-vue'
</script>

<template>
  <DotLottieVue
    autoplay
    loop
    src="animation.lottie"
  />
</template>

<!-- npm install @lottiefiles/dotlottie-svelte -->

<script>
  import { DotLottieSvelte } from '@lottiefiles/dotlottie-svelte';
</script>

<DotLottieSvelte
  src="animation.lottie"
  loop
  autoplay
/>

// Swift Package: https://github.com/LottieFiles/dotlottie-ios

import DotLottie

struct AnimationView: View {
    var body: some View {
        DotLottieAnimation(
            webURL: "https://lottie.host/animation.lottie",
            config: AnimationConfig(autoplay: true, loop: true)
        ).view()
    }
}

// Add to build.gradle:
// implementation 'com.lottiefiles.dotlottie:dotlottie-android:0.0.1'

import com.lottiefiles.dotlottie.core.model.Config
import com.lottiefiles.dotlottie.core.widget.DotLottieAnimation

val config = Config.Builder()
    .autoplay(true)
    .loop(true)
    .source(DotLottieSource.Url("animation.lottie"))
    .build()

dotLottieAnimationView.load(config)

// flutter pub add dotlottie_flutter

import 'package:dotlottie_flutter/dotlottie_flutter.dart';

DotLottieView(
  sourceType: 'url',
  source: 'https://lottie.host/animation.lottie',
  autoplay: true,
  loop: true,
)

"But what about Rive?"

Ah yes, the supposed "Lottie killer." Let's talk about what's actually true in 2025:

"So why would I ever use Rive?"

Honestly? If you're building a game engine or need data binding right now, sure. But for 99% of use cases—and 100% of cases in 6 months—just fucking use Lottie.

Yeah, but...

Where the big players use Lottie

This isn't just for loading spinners. The world's best apps use Lottie for their core product experiences:

Google, Airbnb, Duolingo, Spotify, TikTok, Uber—they all ship Lottie. Almost every animation you love in a modern app? Probably Lottie.