name: lottie description: Lottie animations. Pre-made icon animations, loading states, micro-interactions. LottieFiles library. last_updated: 2026-03 owner: Frank

Lottie

Pre-made animations. Export from After Effects or get from LottieFiles.

See also: agents/rive/SKILL.md, agents/motion/SKILL.md

TL;DR

What is Lottie?

Lottie = JSON-based animation format

• Tiny file sizes (usually <50KB)
• Scalable (vector-based)
• Cross-platform (web, iOS, Android)
• No code needed — just play/pause

Setup

# React (recommended)
npm install lottie-react

# Vanilla JS
npm install lottie-web

Basic Usage (React)

import Lottie from "lottie-react"
import successAnimation from "./animations/success.json"

export function SuccessAnimation() {
  return (
    <Lottie
      animationData={successAnimation}
      loop={false}
      className="w-32 h-32"
    />
  )
}

With Controls

import Lottie, { LottieRefCurrentProps } from "lottie-react"
import { useRef } from "react"

export function ControlledAnimation() {
  const lottieRef = useRef<LottieRefCurrentProps>(null)

  return (
    <div>
      <Lottie
        lottieRef={lottieRef}
        animationData={animationData}
        loop={true}
        autoplay={false}
      />
      
      <button onClick={() => lottieRef.current?.play()}>Play</button>
      <button onClick={() => lottieRef.current?.pause()}>Pause</button>
      <button onClick={() => lottieRef.current?.stop()}>Stop</button>
      <button onClick={() => lottieRef.current?.setSpeed(2)}>2x Speed</button>
    </div>
  )
}

Hover Animation

import Lottie from "lottie-react"
import { useRef } from "react"

export function HoverAnimation() {
  const lottieRef = useRef(null)

  return (
    <div
      onMouseEnter={() => lottieRef.current?.play()}
      onMouseLeave={() => lottieRef.current?.stop()}
    >
      <Lottie
        lottieRef={lottieRef}
        animationData={iconAnimation}
        loop={false}
        autoplay={false}
        className="w-8 h-8"
      />
    </div>
  )
}

Loading Button

import Lottie from "lottie-react"
import loadingAnimation from "./loading.json"
import successAnimation from "./success.json"

export function SubmitButton({ onClick }: { onClick: () => Promise<void> }) {
  const [state, setState] = useState<"idle" | "loading" | "success">("idle")

  const handleClick = async () => {
    setState("loading")
    await onClick()
    setState("success")
    setTimeout(() => setState("idle"), 2000)
  }

  return (
    <button onClick={handleClick} className="relative w-32 h-12">
      {state === "idle" && <span>Submit</span>}
      {state === "loading" && (
        <Lottie animationData={loadingAnimation} className="w-8 h-8" />
      )}
      {state === "success" && (
        <Lottie animationData={successAnimation} loop={false} className="w-8 h-8" />
      )}
    </button>
  )
}

From URL (LottieFiles)

import { DotLottieReact } from "@lottiefiles/dotlottie-react"

export function FromUrl() {
  return (
    <DotLottieReact
      src="https://lottie.host/xxx/animation.lottie"
      loop
      autoplay
      style={{ width: 200, height: 200 }}
    />
  )
}

Where to Get Animations

Common Patterns

Performance Tips

1. Keep JSON small — Simplify in After Effects
2. Lazy load — Don't load on initial render
3. Stop when hidden — Use Intersection Observer
4. Use .lottie format — More compressed than JSON

Lottie vs Rive

Resources

• LottieFiles: https://lottiefiles.com
• Docs: https://airbnb.io/lottie
• React Package: https://www.npmjs.com/package/lottie-react

Related Skills

• agents/rive/SKILL.md — Interactive animations
• agents/motion/SKILL.md — React animations
• agents/micro-interactions/SKILL.md — UI feedback