lottie-animation

Install @lottiefiles/dotlottie-react and render the DotLottieReact component with src, loop, and autoplay props. Capture the player instance via dotLottieRefCallback to call play, pause, setSpeed, or setSegment imperatively.

A .json file is raw Bodymovin output, human-readable but larger. A .lottie file is a zipped container often 60-80% smaller that can bundle multiple animations, images, and themes, and is preferred for shipping with the dotLottie runtime.

Create the player with autoplay disabled, read totalFrames after the load event, and map scroll progress from 0 to 1 onto frames using setFrame on each scroll event. Alternatively use @lottiefiles/lottie-interactivity with scroll mode for declarative frame mapping.

Yes, if the .lottie file embeds named themes, call setTheme with a theme id to recolor without re-exporting. Manual patching of color arrays in the JSON layers is possible but brittle and depends on the layer structure.

Expressions, most effects like blurs and glows, 3D layers and cameras, time remapping, adjustment layers, layer styles, and audio are unsupported or inconsistent. Bake expressions to keyframes and recreate looks with shape layers, gradients, and mattes.

Yes, the same .lottie or .json plays on lottie-ios, lottie-android, and lottie-react-native with matching segment and progress concepts. Always verify the exported file on each target runtime since renderers differ slightly.