Lottie React
Render After Effects animations as crisp, lightweight Lottie JSON in React. Configures playback, controllers, interactivity, and DotLottie for 90% smaller files.
This skill integrates Lottie animations into React using lottie-react or @lottiefiles/dotlottie-react. It handles JSON loading, segment playback, hover/scroll interactivity, dark-mode color overrides via expressions, and the DotLottie binary format for dramatically smaller bundles.
lottie animation react dotlottie after-effects
When to use
Use when integrating designer-produced animations (loading states, success checks, illustrations) into React, when you need interactive Lottie playback, or to migrate from heavy JSON to DotLottie.
Examples
Interactive Lottie button
Play a Lottie on hover and reverse on mouse-out
Create a like-button with a Lottie heart that plays forward on click and morphs back on second click
Scroll-driven Lottie scrubbing
Scrub a Lottie animation tied to scroll progress
Build a hero illustration that scrubs through a Lottie animation as the user scrolls through the section