Skip to main content

Loading Lottie animations from a URL

In order to load a Lottie animation from a URL that has been put into the public/ folder, use fetch and Remotion's delayRender() function.

The resource must support CORS.

Use the LottieAnimationData type to keep a state using React's useState() and only render the <Lottie> component once the data has been fetched.

Animation.tsx
tsx
import { Lottie, LottieAnimationData } from "@remotion/lottie";
import { useEffect, useState } from "react";
import { cancelRender, continueRender, delayRender } from "remotion";
 
const Balloons = () => {
const [handle] = useState(() => delayRender("Loading Lottie animation"));
 
const [animationData, setAnimationData] =
useState<LottieAnimationData | null>(null);
 
useEffect(() => {
fetch("https://assets4.lottiefiles.com/packages/lf20_zyquagfl.json")
.then((data) => data.json())
.then((json) => {
setAnimationData(json);
continueRender(handle);
})
.catch((err) => {
cancelRender(err);
});
}, [handle]);
 
if (!animationData) {
return null;
}
 
return <Lottie animationData={animationData} />;
};
Animation.tsx
tsx
import { Lottie, LottieAnimationData } from "@remotion/lottie";
import { useEffect, useState } from "react";
import { cancelRender, continueRender, delayRender } from "remotion";
 
const Balloons = () => {
const [handle] = useState(() => delayRender("Loading Lottie animation"));
 
const [animationData, setAnimationData] =
useState<LottieAnimationData | null>(null);
 
useEffect(() => {
fetch("https://assets4.lottiefiles.com/packages/lf20_zyquagfl.json")
.then((data) => data.json())
.then((json) => {
setAnimationData(json);
continueRender(handle);
})
.catch((err) => {
cancelRender(err);
});
}, [handle]);
 
if (!animationData) {
return null;
}
 
return <Lottie animationData={animationData} />;
};

See also