https://github.com/ahgsql/remotion-lottie

Lottie / Bodymovin Controller for Remotion
https://github.com/ahgsql/remotion-lottie

Last synced: about 23 hours ago
JSON representation

Lottie / Bodymovin Controller for Remotion

• Host: GitHub
• URL: https://github.com/ahgsql/remotion-lottie
• Owner: ahgsql
• License: mit
• Created: 2021-06-14T01:35:45.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2021-07-31T18:33:23.000Z (over 3 years ago)
• Last Synced: 2024-11-13T06:52:52.761Z (6 days ago)
• Language: JavaScript
• Size: 33.2 KB
• Stars: 19
• Watchers: 2
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Remotion Lottie

Lottie / Bodymovin Controller for Remotion.

![npm bundle size](https://img.shields.io/bundlephobia/min/remotion-lottie) ![npm bundle size](https://img.shields.io/bundlephobia/minzip/remotion-lottie) [![npm downloads](https://img.shields.io/npm/dt/remotion-keyframes)](https://www.npmjs.com/package/remotion-lottie) [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/facebook/react/blob/master/LICENSE)

## Installation

```bash

npm install remotion-lottie

```

or

```bash

yarn add remotion-lottie

```

## Usage

Load your animation into **Lottier** Component.

### Load Library and Lottie JSON file

```jsx

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**

```jsx

import { Sequence, useCurrentFrame } from "remotion";

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

import data from "./11.json";

export const HiLottie = () => {

  return (

    

      

    

  );

};

```

## useLottie

useLottie(data) is small helper to get information about animation.

You can use it to determine **Composition size** or **Sequence durationInframes** props.

```jsx

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

```

```jsx

let { op } = useLottie(data);

return (

  

    

  

);

```

## License

MIT © [ahgsql](https://github.com/ahgsql)