Lottie Animations: JSON-Based Vector Animations from After Effects

Complex illustrations and micro-animations that come from the design team (After Effects files) cannot be used directly in a web app.

Export the After Effects animation as a .json file via the Bodymovin plugin, then play it with lottie-react or lottie-web.

import Lottie from 'lottie-react';
import confettiData from './confetti.json';

function SuccessAnimation() {
  return (
    <Lottie
      animationData={confettiData}
      loop={false}
      autoplay
      style={{ width: 200, height: 200 }}
    />
  );
}

// Programmatic control
import { useLottie } from 'lottie-react';

function ControlledAnimation() {
  const { View, play, stop, setSpeed } = useLottie({
    animationData: confettiData,
    loop: false,
    autoplay: false,
  });

  return (
    <div>
      {View}
      <button onClick={play}>Play</button>
    </div>
  );
}

Lottie renders SVG/Canvas animations at any resolution with perfect fidelity to the After Effects original, replacing bulky GIFs or complex hand-coded SVG animations.