Remotion Lottie

Lottie / Bodymovin Controller for Remotion.

Installation

npm install remotion-lottie

or

yarn add remotion-lottie

Usage

Load your animation into Lottier Component.

Load Library and Lottie JSON file

import { Lottier, useLottie } from "remotion-lottie";

import data from "./animationData.json";

Props

• data: Pass loaded animation data Required

• fitMode : "fitToWidth" , "fitToHeight" , "fitToContent" Not Required

• stayAtLastFrame : true or false, if true animation will stay on its last frame. false by default

import { Sequence, useCurrentFrame } from "remotion";
import { Lottier, useLottie } from "remotion-lottie";
import data from "./11.json";

export const HiLottie = () => {
  return (
    <Sequence from={0} durationInFrames={150}>
      <Lottier data={data} fitMode="fitToWidth" stayAtLastFrame={true} />
    </Sequence>
  );
};

useLottie

useLottie(data) is small helper to get information about animation. You can use it to determine Composition size or Sequence durationInframes props.

let { w, h, op, fr } = useLottie(data);

let { op } = useLottie(data);
return (
  <Sequence from={0} durationInFrames={op}>
    <Lottier data={data} fitMode="fitToWidth" stayAtLastFrame={true} />
  </Sequence>
);

License

MIT © ahgsql