lottie-animation

Install @lottiefiles/dotlottie-web, create a DotLottie instance with a canvas element and your .lottie or .json source, then set autoplay and loop. For React, use the DotLottieReact component from @lottiefiles/dotlottie-react with the same props.

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.

Disable autoplay, read totalFrames after the load event, then map scroll progress from 0 to 1 onto frames using setFrame on scroll events. Alternatively use @lottiefiles/lottie-interactivity with scroll mode and seek actions for declarative wiring.

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

Expressions, most effects like blurs and glows, 3D layers, cameras, audio, adjustment layers, and layer styles are unsupported. Bake expressions to keyframes, replace effects with shape layers and gradients, and verify output on each target runtime.

Yes, the same .lottie or .json plays across platforms using lottie-ios, lottie-android, and lottie-react-native. Segment and progress control concepts match the web API, though renderers differ slightly so testing on each target is recommended.