lottie-animations

Install @lottiefiles/dotlottie-react and render the DotLottieReact component with a src pointing to your .lottie or .json file, plus loop and autoplay props. Use dotLottieRefCallback to get the instance for programmatic play, pause, and seek controls.

lottie-web is the original library supporting SVG, Canvas, and HTML renderers. lottie-react wraps it for React with hooks and interactivity. dotlottie-web is the modern library using the compressed .lottie format and supports Web Worker rendering for better performance.

Use dotLottie (.lottie) for production since ZIP compression reduces file size by up to 90% and supports multiple animations and themes in one file. JSON remains useful for development and when bundling animation data directly via imports.

Stuttering usually comes from SVG rendering of complex animations on the main thread. Switch to the Canvas renderer, use DotLottieWorker to offload rendering, lower devicePixelRatio on mobile, or simplify the After Effects composition.

Layer effects like drop shadows and glows, 3D layers, cameras, adjustment layers, and most blending modes are unsupported. Convert effects to shape layers, enable Glyphs for text, and test exports on LottieFiles preview before shipping.

Call destroy() on the dotLottie instance in the useEffect cleanup function when the component unmounts. Also remove all registered event listeners in the cleanup to avoid duplicate handlers accumulating across renders.