remotion-lottie
v1.0.5
Published
Lottie / Bodymovin Controller for Remotion.
Downloads
7
Maintainers
Readme
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