Lottie

import lottie from 'lottie-web';

// Basic animation
const animation = lottie.loadAnimation({
  container: document.getElementById('animation'),
  path: 'data.json',
  renderer: 'svg',
  loop: true,
  autoplay: true
});

// Control
animation.play();
animation.pause();
animation.stop();
animation.setSpeed(2);
animation.goToAndPlay(100, true); // 100 frames

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

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

// With controls
function ControlledAnimation() {
  const animationRef = useRef();
  
  return (
    <>
      <DotLottieReact
        ref={animationRef}
        src="animation.json"
        autoplay={false}
      />
      <button onClick={() => animationRef.current.play()}>
        Play
      </button>
    </>
  );
}