Lottie React tutorial with a working example

Start with the working example

Our original example assets are free to use and modify. Player code retains its included license.

Try the React component

1. Get the working example

Download the React example ZIP, extract it, and run npm install followed by npm run dev. It includes the component, a pinned package manifest, an original Lottie file, and its editable .motion project. The example asset is available for use and modification without an editor subscription.

2. Put the file at a stable URL

The component fetches /examples/animation.json from the public directory. Replace that file with your exported animation. If your site lives under a URL subdirectory, adjust the fetch path to your deployment base. Keep the exported asset and the editable source as separate files.

3. Create and destroy the player in an Effect

The component initializes lottie-web after mounting and retains the player in a ref. Cleanup cancels the pending fetch, removes the preference listener, and destroys the player. The disposed flag prevents a delayed import from attaching to an unmounted component. This also supports the extra setup and cleanup cycle used by React development checks.

4. Respect reduced motion and loading state

The player starts paused. Once the file has loaded, it plays unless reduced motion is requested. A preference change pauses on the first frame. Play and Pause remain available for an explicit user choice. The decorative canvas is hidden from assistive technology; put the real task status in separate text.

5. Replace the artwork and verify

Use the editable template below to customize the design. Check the new JSON in the preview tool, then test the actual React page. This example uses the light player without expression support. It handles this vector example; it does not prove compatibility with every After Effects export.

Customize the source animation

Reference documentation

• React useEffect reference
• lottie-web player documentation

Continue with your animation

Try the moving button arrow in your component, or browse all six downloadable Lottie examples. Replace the sample JSON with your chosen file and keep its editable source for later changes.