Lottie / Bodymovin Controller for Remotion

Overview

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

You might also like...
Owner
null
Grupprojekt för kurserna 'Javascript med Ramverk' och 'Agil Utveckling'

JavaScript-med-Ramverk-Laboration-3 Grupprojektet för kurserna Javascript med Ramverk och Agil Utveckling. Utvecklingsguide För information om hur utv

Svante Jonsson IT-Högskolan 3 May 18, 2022
Easy Effect is a WYSIWYG Lottie animation editor, dedicated to helping you make dynamic effects easily.

Easy Effect ?? Introduction Easy Effect is a WYSIWYG animation editor based on Lottie. ✨ Feature ?? ease to use Anyone who want to create an animation

拍岸 10 Dec 16, 2022
Hemsida för personer i Sverige som kan och vill erbjuda boende till människor på flykt

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

null 4 May 3, 2022
Kurs-repo för kursen Webbserver och Databaser

Webbserver och databaser This repository is meant for CME students to access exercises and codealongs that happen throughout the course. I hope you wi

null 14 Jan 3, 2023
100% web real-time audio experiment using smartphones as effect controller. (tech: Android Chrome + WebRTC + Web Audio API)

beez 100% web real-time audio experiment using smartphones as effect controller. (tech: Android Chrome + WebRTC + Web Audio API) The concept An Hive i

Gaëtan Renaudeau 34 Dec 16, 2022
Este projeto acelara o desenvolvimento com express, gerando uma estrutura completa e opções de gerar controller mode e view pelo cmd.

fast-developer-express Este projeto acelara o desenvolvimento com express, gerando uma estrutura completa e opções de gerar controller mode e view pel

Rodrino Adolfo Kupessala 1 Dec 21, 2021
Using a Leap Motion Controller from Ultraleap for finger tracking in VRChat without mods

Leap Motion Controller finger tracking for VRChat OSC Using a Leap Motion Controller from Ultraleap for finger tracking in VRChat without mods. Descri

adeleine 28 Dec 31, 2022
Launchpad Pro Mk3 Controller Script for Bitwig (Tested on 4+, should work on 3.2.5+)

Launchpad Pro Mk3 for Bitwig (Bitwig Controller Script) A Bitwig controller script that matches (and expands) the functionality that Novation and Able

wes koop 34 Dec 20, 2022
A first person character controller for the Three.js graphics library

charactercontroller A first person character controller for the Three.js graphics library Demo Installation npm install charactercontroller Usage impo

Malted 10 Aug 17, 2022
View component and controller of YouTube Player API, for fresh framework.

fresh-youtube View component and controller of YouTube Player API, for fresh framework. Try it now! git clone [email protected]:otiai10/fresh-youtube.git

Hiromu OCHIAI 10 Nov 2, 2022