remotion-lottie

Lottie / Bodymovin Controller for Remotion.

Usage no npm install needed!

<script type="module">
  import remotionLottie from 'https://cdn.skypack.dev/remotion-lottie';
</script>

README

Remotion Lottie

Lottie / Bodymovin Controller for Remotion.

npm bundle size npm bundle size npm downloads GitHub license

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