From animation file
to live product.

Choose your platform’s Lottie integration, add the animation file, reserve its display space, and control playback deliberately. Test the actual animation on the published page, including mobile and reduced-motion behavior.

Webflow

1. Upload your Lottie JSON or dotLottie asset to the Assets panel.
2. Add it to the page using a Lottie element and set its dimensions.
3. Configure playback or an interaction trigger. Avoid adding a separate player for the same element.
4. Publish a staging page and test the real file, including any image assets and fonts.

Webflow’s Lottie integration guide ↗

React

One option is the official dotLottie React package. Install @lottiefiles/dotlottie-react, then render a component with a valid local animation URL. This minimal example deliberately does not autoplay:

import { DotLottieReact } from '@lottiefiles/dotlottie-react';

export function ProductMotion() {
  return <DotLottieReact
    src="/animations/onboarding.lottie"
    autoplay={false}
    loop={false}
    style={{ width: 320, height: 240 }}
    aria-label="Product onboarding illustration"
  />;
}

Use the runtime reference to connect play and pause controls, freeze offscreen motion and clean up listeners when the component unmounts. Decorative motion should be hidden from assistive technology; meaningful information also needs an accessible text alternative.

Official dotLottie React documentation ↗

Framer

1. Add your file using Framer’s Lottie support or the official LottieFiles plugin.
2. Set the component’s size and playback behavior for the intended interaction.
3. Check light and dark contexts, responsive layouts and reduced-motion settings.
4. Review the published page’s loading and scroll performance.

LottieFiles plugin for Framer · Framer reduced-motion settings

Before shipping on any platform

Reserve layout space, pause offscreen players, defer nonessential animation loads, and avoid rendering a whole library at once. Keep a static fallback. Verify feature support on the exact runtime version you ship; a browser preview is not proof of native iOS or Android compatibility.

Need a quick inspection? Try the Lottie analyzer or embed generator.