remotion-dev / skills

remotion-markup

Structure Remotion scenes with markup patterns for layout, typography, and reusable video UI.

View source Video Remotion

Install

npx skills add https://github.com/remotion-dev/skills --skill remotion-markup

metadata: category: Animation

Using Lottie Animations in Remotion

Prerequisites

First, the @remotion/lottie package needs to be installed.
If it is not, use the following command:

bash

npx remotion add @remotion/lottie # If project uses npmbunx remotion add @remotion/lottie # If project uses bunyarn remotion add @remotion/lottie # If project uses yarnpnpm exec remotion add @remotion/lottie # If project uses pnpm

Displaying a Lottie file

To import a Lottie animation:

Fetch the Lottie asset
Wrap the loading process in delayRender() and continueRender()
Save the animation data in a state
Render the Lottie animation using the Lottie component from the @remotion/lottie package

tsx

import { Lottie, LottieAnimationData } from "@remotion/lottie";import { useEffect, useState } from "react";import { cancelRender, continueRender, delayRender } from "remotion";
export const MyAnimation = () => {  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} />;};

Styling and animating

Lottie supports the style prop to allow styles and animations:

Design engineering