gamote / lottie-react

A lightweight React library for rendering complex After Effects animations in real time using Lottie.

lottie-react

This project is meant to give developers full control over Lottie instance with minimal implementation by wrapping lottie-web in a Component or Hook that can be easily used in React applications.

Installation

1. Make sure you have the peer-dependencies installed: react and react-dom.

   Note: This library is using React Hooks so the minimum version required for both react and react-dom is v16.8.0.

2. Install lottie-react using yarn

   yarn add lottie-react

   or npm

   npm i lottie-react

Usage

Using the component (try it)

import React from "react";
import Lottie from "lottie-react";
import groovyWalkAnimation from "./groovyWalk.json";

const App = () => <Lottie animationData={groovyWalkAnimation} loop={true} />;

export default App;

Using the Hook (try it)

import React from "react";
import { useLottie } from "lottie-react";
import groovyWalkAnimation from "./groovyWalk.json";

const App = () => {
  const options = {
    animationData: groovyWalkAnimation,
    loop: true
  };

  const { View } = useLottie(options);

  return <>{View}</>;
};

export default App;

📄 Documentation

Checkout the documentation at https://lottiereact.com for more information and examples.

Tests

Run the tests using the yarn test command.

Coverage report

-----------------------------|---------|----------|---------|---------|-------------------
File                         | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s 
-----------------------------|---------|----------|---------|---------|-------------------
All files                    |     100 |      100 |     100 |     100 |                   
 components                  |     100 |      100 |     100 |     100 |                   
  Lottie.ts                  |     100 |      100 |     100 |     100 |                   
 hooks                       |     100 |      100 |     100 |     100 |                   
  useLottie.tsx              |     100 |      100 |     100 |     100 |                   
  useLottieInteractivity.tsx |     100 |      100 |     100 |     100 |                   
-----------------------------|---------|----------|---------|---------|-------------------

Contribution

Any questions or suggestions? Use the Discussions tab. Any issues? Don't hesitate to document it in the Issues tab, and we will do our best to investigate it and fix it. Any solutions? You are very welcomed to open a pull request.

👩‍💻 v3 is under development and is planning to bring a lot of features and improvements. But unfortunately, at the moment all the maintainers are super busy with work related projects. You can check out the progress under the v3 branch. And of course, you are encouraged to contribute. :)

Thank you for investing your time in contributing to our project! ✨

Projects to check out

• lottie-web - Lottie implementation for Web. Our project is based on it, and you might want to check it out in order to have a better understanding on what's behind this package or what features could you expect to have in the future.
• lottie-android - Lottie implementation for Android
• lottie-ios - Lottie implementation for iOS
• lottie-react-native - Lottie implementation for React Native
• LottieFiles - Are you looking for animations files? LottieFiles has a lot of them!

License

lottie-react is available under the MIT license.

Thanks to David Probst Jr for the animations used in the examples.

lottie-react's Issues

Can't work if set ref in useLottie

Describe the bug
Can't work if set ref in useLottie.

To Reproduce

export default function App() {
  const ref = React.useRef();
  const options = {
    animationData: groovyWalkAnimation,
    loop: true,
    autoplay: true,
    ref: ref
  };

  const { View } = useLottie(options);

  return (
    <>
      <h1>lottie-react - Hook</h1>
      {View}
    </>
  );
}

Expected behavior
Can get ref and useLottie work.

Screenshots
https://codesandbox.io/s/lottie-react-hook-forked-jgcfb?file=/src/App.js:146-502

Packages

• React: 16.13.1
• React-DOM: 16.13.1
• lottie-react: 2.1.0

Change preserveAspectRatio property of SVG

How can I change the preserveAspectRatio property?
If it is not possible, it would be nice to have this feature. In lottie-web is possible.
Thanks

animationData shouldn't be required

Hi,
the animationData property shouldn't be mandatory since we can only use the path property.
Lottie documentation states that only one of two should be required.
https://github.com/airbnb/lottie-web/wiki/loadAnimation-options#path-or-animationdatamandatory-at-least-one

Path is easier to use since it doesn't require to import the json file.
Please consider to change that in future release :)

The `container` property incorrectly required in Lottie component props

In version 2.2.0, the TypeScript type LottieOptions inherits from AnimationConfig (part of lottie-web) which has a require container property of type Element. This seems like a typing bug to me.

Error: src/components/Button.tsx(62,12): error TS2741: Property 'container' is missing in type '{ className: string | undefined; animationData: { v: string; fr: number; ip: number; op: number; w: number; h: number; nm: string; ddd: number; assets: never[]; layers: { ddd: number; ind: number; ty: number; ... 8 more ...; bm: number; }[]; markers: never[]; }; }' but required in type 'AnimationConfig<"svg">'.

Add props from Lottie component to underlying div container

Is your feature request related to a problem? Please describe.
If I give the <Lottie /> component props, I would like to be able to add standard div props and for them to be injected into the underlying <div> container.

Example:

    <Lottie
      animationData={animation}
      aria-busy="true"
      aria-label={label}
      aria-live="polite"
      label={label}
      role="alert"
      style={{ height: '1.167rem', margin: 'auto' }}
    />

Describe the solution you'd like
You could extend LottieOptions type to includeReact.HTMLProps<HTMLDivElement> and then inside the hook on L39:

lottie-react/src/hooks/useLottie.tsx

Line 39 in d96147b

onDestroy,

you could then add a spread {...rest} and add them onto the View on line 255:

lottie-react/src/hooks/useLottie.tsx

Line 255 in d96147b

const View = <div style={style} ref={animationContainer} />;

  const View = <div style={style} ref={animationContainer} {...rest} />;

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

#12

initialSegment runs whenever the component rerenders instead of only once

I have an animation that should start by playing some segments and then waits for onmouseenter and onmouseleave to play other segments. My problem is that when I supply initialSegment that animation gets played every time the component renders and not just the first time.

This looks like a bug.

My code

<Lottie
            lottieRef={lottieRef}
            animationData={animationData}
            initialSegment={initialSegment}
            loop={loop}
            style={style}
          />

This also happens with useLottie

How to set className prop?

Hi DEV,

I want to set className prop, but I don't know how to do it

import Lottie from 'lottie-react';
import { makeStyles } from '@mui/styles';

const useStyles = makeStyles(theme => ({
    icon: {
        width: theme.spacing(3),
        height: theme.spacing(3),
        [theme.breakpoints.down('sm')]: {
            width: theme.spacing(2),
            height: theme.spacing(2),
            '& > div': { fontSize: 16 }
        }
    }
}));

export default function LottieAnimation(props) {
    const classes = useStyles();
    
    return <Lottie {...props} className={classes.icon} />
}

[Suggestion] Parse lottie json from network

I have some lottile files uploaded by users, they are on the server side, so I hope that you can provide a property to receive url. The truth is animationData is required.

BTW, I'm using typescript, prop-types is really unnecessary for me. So why don't you put prop-types to dependencies instead of devDeps?

Enabling Container param on useLottieInteractivity

Is your feature request related to a problem? Please describe.
Yes, I want to make a lottie play with scroll but instead of listening to the lottie container's viewport, I want it to follow a different container. This is included on Lottie Interactivity as they show here: Lottie scroll relative to container (https://lottiefiles.com/interactivity)

Describe the solution you'd like
The solution would be to add this param to the function.
Describe alternatives you've considered
Can't find any other alternative since I can't seem to change the container that the function is reading.
Additional context
Example shown on lottie Interactivity page:
<script> LottieInteractivity.create({ mode: "scroll", player: "#secondLottie", container: "#MyContainerId", actions: [ { visibility: [0,1], type: "seek", frames: [0, 301] } ] }); </script>

Large Memory Leak

Describe the bug
The lottie-react animations are causing large memory leaks. We use multiple animations on a single page within our application. These animations are routinely unmounted and remounted. This leak eventually causes an out of memory browser crash over the course of several hours while our application is running. There is something within the lottie animation not being cleaned up.

To Reproduce

I've created a project here to reproduce the issue. This example just mounts and unmounts multiple example lottie walking animations.

A gh-deployment is here to reproduce: https://stephenesser.github.io/lottie-memory-leak/

Steps to reproduce the behavior:

1. Go to https://stephenesser.github.io/lottie-memory-leak/
2. Open the chrome developer tools and start analyzing the memory
3. Repeatedly (10+ times) click the "Switch" button
4. Observe the browser memory continues to climb

I am unable to tell if clicking "Switch" before the animation completely finishes makes a difference. Sometimes if you let the animation complete before clicking "Switch" it looks like the browser will attempt to reclaim that memory, but it is not consistent.

Expected behavior
When a lottie animation unmounts it should cleanup any memory references.

Screenshots
The memory will continuously climb as animations are mounted and unmounted.

Support for React 17

Describe the bug

Does not appear to work with React 17 for me.

To Reproduce

Steps to reproduce the behavior:

1. Type npm i lottie-react
2. Get an error

Expected behavior

Not get an error.

Additional context

Error message in console when trying to install via npm:

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR!   react@"^17.0.1" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^16.8.0" from [email protected]
npm ERR! node_modules/lottie-react
npm ERR!   lottie-react@"*" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR! 
npm ERR! See /Users/ben/.npm/eresolve-report.txt for a full report.
npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/ben/.npm/_logs/2021-01-21T12_34_49_912Z-debug.log

Interactivity mode give an ts error when use semicolon on property "mode"

Describe the bug
When you define interactivity const with property mode ('scroll' or 'cursor'), typescript display an error on Lottie component property interactivity - "Type 'string' is not assignable to type '"cursor" | "scroll"'."

Expected behavior
TS shouldn't display and error. Because the string is typed correctly.

Screenshots

Desktop (please complete the following information):

• OS: macOS BigSur
• Editor: VS Code

TypeError: Cannot read property 'current' of null

Not a huge deal, but it seems like ref seems to be a required prop. I was getting this error after following the docs unless I specified it, even though I have no need for interaction

Recommended implementation for React and lottie-web with typescript ?

Hi,

I have been trying to find a typescript implementation and came across this, I found quite a few that's been abandoned.

I was wondering if this is still under development and maintained?

Or is there an alternative I should be looking at.

Thanks in advance!

Is there any way to change the colour of the icon?

As the title suggests, I would like to be able to change the colour of the animation dynamically. Is there any way to do this?

Forward options to lottie-web

Hello,

Nice wrapper, thanks for providing it :)

Would it be possible to forward all options from useLottie() to lottie-web (despite the ones that need to be controlled by the hook such as container?)
https://github.com/Gamote/lottie-react/blob/master/src/hooks/useLottie.js#L172

For instance, lottie-web allows different renderers such as 'svg' | 'canvas' | 'html' with optional rendererSettings:
https://github.com/airbnb/lottie-web#other-loading-options

I think forwarding the full lottie-web config (easiest being as an object) would delegate the responsibility of rendering to lottie-web itself, which is what I would personally expect from such a wrapper.
It also has the benefit of making the integration more future-proof.

Lottie animations bottleneck the DOM

There's a weird issue with Lottie animations in React/Gatsby. I've tried many plugins like react-lottie, lottie-react, lottie-web etc. They all start bottlenecking the dom while navigating back and forth pages.

I've made an example with the issue: https://elegant-aryabhata-490c95.netlify.app/ If you navigate between the pages Go to page 2 and Go back to the homepage, soon enough the DOM stops and the animation starts rendering extra stuff as well.

I am rendering the animations like so:

import * as React from "react"
import { Link } from "gatsby"

import Layout from "../components/layout"
import SEO from "../components/seo"

import Lottie from "lottie-react"
import contactAnimation from "../components/assets/contact.json"

const SecondPage = () => (
  <Layout>
    <SEO title="Page two" />
    <h1>Hi from the second page</h1>
    <p>Welcome to page 2</p>
    <Link to="/">Go back to the homepage</Link>
    <Lottie animationData={contactAnimation} style={{ width: "600px" }} />
  </Layout>
)

export default SecondPage

I have a plain HTML version as well https://upbeat-lewin-aabd01.netlify.app/ which has no issues. It looks like a memory leak or something but have no idea how to debug this.

v3 Roadmap / prerelease?

What's the current Roadmap for v3 and when can we expect a prerelease version for testing? Can we support?

Passing interactivity adds another wrapping div that might break styling

Describe the bug

There's Inconsistent rendering behavior when passing interactivity prop - Another wrapping div is rendered, preventing passing relative sizes to through style or className prop (The wrapping div is rendered here, so passing 100% to width/height wouldn't be applied correctly)

To Reproduce
Steps to reproduce the behavior:

1. Render Lottie with style={{width: '100%', height: '100%'}} within a div with set height and width
2. The animation will resize to fill containing div.
3. Pass interactivity property - the animation will no longer fill containing div

Expected behavior
Passing interactivity shouldn't break DOM structure in such a way

Screenshots

Style options not being applied to container <div>

Describe the bug
Adding style to the Lottie does not appear to apply the styles to the container div.

To Reproduce
Steps to reproduce the behavior:

1. https://codesandbox.io/s/lottie-react-hook-13nio?file=/src/App.js
2. Apply the following code in place of existing:

const styles = {
    width: 500,
    height: 500
  }
  const options = {
    animationData: groovyWalkAnimation,
    loop: true,
    autoplay: true,
    style: styles
  };

3. Inspect the Lottie container div and you will see no width or height style is applied.

Expected behavior
Applying the style option should add these styles to the container div as per documentation.
https://lottiereact.com/#style

Desktop (please complete the following information):

• OS: macOS Mojave 10.14.6
• Browser Chrome
• Version 98.0.4758.102

type script error ( Property 'container' is missing )

Property 'container' is missing in type '{ className: string; animationData: any; }' but required in type 'AnimationConfig<"svg">'.

Is the "chain" mode available for the interactivity hook?

Type 'number[][]' is not assignable to type 'AnimationSegment | AnimationSegment[]'.

I'm using react, nextjs, and typescript. My lottie component plays the first 23 frames once, followed by the rest of the frames on a loop. I send an array to the prop 'segments'. Everything renders totally fine, but linting returns this error:

Type 'number[][]' is not assignable to type 'AnimationSegment | AnimationSegment[]'.
  Type 'number[][]' is not assignable to type 'AnimationSegment[]'.
    Type 'number[]' is not assignable to type 'AnimationSegment'.
      Target requires 2 element(s) but source may have fewer.ts(2322)
index.d.ts(18, 7): The expected type comes from property 'segments' which is declared here on type 'IntrinsicAttributes & PropsWithChildren<LottieProps>'

Here's my code:

import React from 'react'
import Lottie from 'react-lottie-player'
import VarHPattern from '../../data/Patterns_Blue_Dark.json'

export default function Pattern() {
  const playFrames = [
    [0, 23],
    [24, 95],
  ]
  return (
    <Lottie
      animationData={VarHPattern}
      loop
      segments={playFrames}
      play
      rendererSettings={{ preserveAspectRatio: 'xMidYMid slice' }}
      style={{ height: '100%' }}
    />
  )
}

Like I said, it's not breaking anything. It is, however, driving me crazy when I go to lint everything prior to production. Any ideas?

How to set a Speed for the Lottie ?

hi ,
thank you for the amazing library . can you help me with this issue , i can't find a way to set the speed for this library

Error: <path> attribute d: Expected moveto path command ('M' or 'm')

Describe the bug
Lottie animations do not display properly, console gives the following error: Error: <path> attribute d: Expected moveto path command ('M' or 'm')

To Reproduce
Steps to reproduce the behavior:
Attempt to display the linked lottie animation as follows:
<Lottie autoplay loop animationData={Angry} rendererSettings={{preserveAspectRatio: 'xMidYMid slice'}}/>

Expected behavior
The animation shows well in localhost development environment, but fails to load in production.

Screenshots
Only tiny parts of the animation are loaded:

Whereas it is supposed to look like this (on localhost):

Desktop (please complete the following information):

• OS: Windows
• Browser: Chrome
• Version: 107.0.5304.107 (Official Build) (64 bits) (cohort: Stable)

Smartphone (please complete the following information):

• Device: iPhone 8
• OS: iOS 16.1
• Browser: Safari
• Version : 16.1

Additional context

SVGShapeElement.renderInnerContent | @ | ea88be26-9bdc0959c76d7334.js:1
-- | -- | --
  | renderFrame | @ | ea88be26-9bdc0959c76d7334.js:1
  | SVGRendererBase.renderFrame | @ | ea88be26-9bdc0959c76d7334.js:1
  | AnimationItem.renderFrame | @ | ea88be26-9bdc0959c76d7334.js:1
  | AnimationItem.gotoFrame | @ | ea88be26-9bdc0959c76d7334.js:1
  | AnimationItem.setCurrentRawFrameValue | @ | ea88be26-9bdc0959c76d7334.js:1
  | AnimationItem.advanceTime | @ | ea88be26-9bdc0959c76d7334.js:1

angry.zip

Interactive scroll animation stops

Describe the bug
The animation stops if the animation container position is 'sticky', but the animation only stops while the container is stuck.

To Reproduce
Steps to reproduce the behavior:

export default function App() {
  const style = {
    height: "94vh",
    border: "3px solid black",
    borderRadius: "10px",
    position: "sticky",
    top: "5vh"
  };
  const options = {
    animationData: groovyWalkAnimation
  };

  const lottieObj = useLottie(options, style);
  const Animation = useLottieInteractivity({
    lottieObj,
    mode: "scroll",
    actions: [
      {
        visibility: [0.1, 0.9],
        type: "seek",
        frames: [0, 62]
      }
    ]
  });

  return (
    <>
      <h1>lottie-react - Hook</h1>
      <h1>lottie-react - Hook</h1>
      <h1>lottie-react - Hook</h1>
      <h1>lottie-react - Hook</h1>
      <h1>lottie-react - Hook</h1>
      <h1>lottie-react - Hook</h1>
      <h1>lottie-react - Hook</h1>
      <h1>lottie-react - Hook</h1>
      <h1>lottie-react - Hook</h1>
      <h1>lottie-react - Hook</h1>
      <div style={{ height: "500vh", marginBottom: "1vh" }}>{Animation}</div>
      <h1>lottie-react - Hook</h1>
      <h1>lottie-react - Hook</h1>
      <h1>lottie-react - Hook</h1>
      <h1>lottie-react - Hook</h1>
      <h1>lottie-react - Hook</h1>
      <h1>lottie-react - Hook</h1>
      <h1>lottie-react - Hook</h1>
      <h1>lottie-react - Hook</h1>
      <h1>lottie-react - Hook</h1>
      <h1>lottie-react - Hook</h1>
    </>
  );
}

Expected behavior
The animation should continue playing while the user is scrolling.

Additional context
Code sandbox example

autoplay prop on component is not respected

Describe the bug
Autoplay on lottie component is not respected.

To Reproduce
Steps to reproduce the behavior:

2. See animation play on load.

Expected behavior
Component to respect autoplay prop.

Screenshots

Desktop (please complete the following information):

• OS: macOs
• Browser chrome
• Version 103 (chrome)

What is correct approach to having two animations on a single page, when using "useLottie" hook?

Describe the bug
Unable to have two animations on a single page, using two calls to useLottie

To Reproduce
https://codesandbox.io/s/lottie-react-hook-forked-rtwqp?file=/src/App.js

Expected Behavior
Would have expected there to be two instances of the animation on this page.

Desktop (please complete the following information):

• OS: Windows 10
• Browser: Chrome
• Version: Version 91.0.4472.124 (Official Build) (64-bit)

Cannot pass number value to loop prop

Describe the bug
I get this typescript error when I pass a number value to loop prop of Lottie component.

Type 'number | boolean | undefined' is not assignable to type 'boolean | undefined'.
  Type 'number' is not assignable to type 'boolean | undefined'.

To Reproduce
<Lottie loop={3} />

Expected behavior
Error should not occur.

Screenshots
None

Animation Glitches

Hi,
I need to show a loading indicator when my app is loading, however, the app load is a heavy task which makes the animation glitch as you see below. Is there any recommendation of how to fix this?

2022-10-13.17-35-43.mp4

I can confirm that the animation runs smoothly though on a lottie web player

Thanks

Support for React 18

Describe the bug

Does not appear to work with React 18.

To Reproduce

Steps to reproduce the behavior:

1. Setup a project using React 18
2. Run npm install lottie-react

Expected behavior

Should install without issues.

Additional context

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR!   react@"18.1.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^16.8.0 || ^17.0.0" from [email protected]
npm ERR! node_modules/lottie-react
npm ERR!   lottie-react@"*" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See /Users/huckleberryfinn/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/huckleberryfinn/.npm/_logs/2022-05-22T09_45_33_234Z-debug-0.log

Animation runs repeatedly in interactive mode with loop={false}

Describe the bug
When set to not loop and play the animation once in a block, the expectation I have is that upon entering the block the animation will play once and then not repeat. Instead, the result is that the animation plays once and then replays again on each incremental interaction.

To Reproduce
Steps to reproduce the behavior:

1. Set up an animation with the props:

        loop={false}
        interactivity={{
          mode: "scroll",
          actions: [
            { visibility: [0, 0.3], type: "stop", frames: [0] },
            { visibility: [0.3, 1.0], type: "play", frames: [0, 38] }
          ]
        }}

2. Scroll until 30% visible and observe one playthrough
3. Scroll until 31% visible and observe a second playthrough

Expected behavior
The expectation would be that the playthrough would happen once while the user was in section 30%-100% and then not play again.

Desktop (please complete the following information):

• OS: Mac
• Browser: Chrome
• Version: 105 (Latest)

How to use Interaction Methods?

sorry, please delete this issue

Animation Hover Support

Describe the bug
There is no way to support having a hover effect, Lottie images can have a hover effect as seen in the below:

Expected behavior
There should be a way to add a hover prop so that when hovered it will replay a portion of the animation as described in the Lottie JSON file, this is possible through the player but that replays the full animation.

Screenshots
Example Codepen of the hover in action:
https://codepen.io/jeremywinter/pen/MWrPoLv

playSegments does not stop when it comes to last frame

My playSegments looks like this

playSegments([361, 400],);

but it plays without stopping.

What I want is just play on a button click to a specific frame and stop there. Did I something wrong?

onDataReady does not get called

Are onDataReady and all others implemented? Because of #13 I am looking for a way to run the initial animation only once and was hoping to use onDataReady={()=>lottieRef.current.playSegments(initialSegment)} do do just that.

My code does not get exectued though.

onDOMLoaded and onEnterFrame seem to be implemented

Cannot use ref methods

Describe the bug
I'm trying to use the goToAndPlay method on an animation, and it errors out.

To Reproduce
Steps to reproduce the behavior:

1. Go to https://codesandbox.io/s/react-lottie-tryout-drhon?file=/src/App.tsx:1241-1252
2. Click on the 'Complete' button for the animation to skip to the 120th frame.
3. Watch that it throws an error on clicking the button.

Expected behavior
It shouldn't error and instead jump to the frame as intended.

Screenshots
N/A

Desktop (please complete the following information):

• OS macOS Catalina 10.15.6
• Browser Chrome
• Version 87.0.4252.0 (Official Build) dev (x86_64)

Additional context
Initializing the useRef with default value null has the same effect.

Incorrect type of "renderer" property of Lottie component

Describe the bug
Passing renderer property with value "canvas" or "html" to Lottie component triggers type error

To Reproduce
Pass renderer="canvas" or renderer="html" to Lottie component

Expected behavior
Typescript error is not displayed, renderer property accepts 'svg' | 'canvas' | 'html' values

Screenshots

Change viewBox and width/height from lottie-react?

Is there any lottie-react way of changing the svg viewBox and width/height?

Or do I need to get the element by tag and change it the non react way?

The reason I need to change this I want my svg to be 100vh on every device but somehow with the lottie styles only this is not possible, but I would be happy about any suggestion. Thanks

Help with playSegments

I'm trying to have my lottie animation play the first 23 frames, and then skip them when it loops back and restarts and play frames 24-95 indefinitely. I'm dumb and can't seem to figure out how to make this work. Example here of it implemented with react-lottie-player (I'm switching over because you're more active and cool)

Here's my code that isn't working:

function PageHeader_VariableHeight() {
  const playFrames = {
    segments: [
      [0, 23],
      [24, 95],
    ],
    forceFlag: false,
  }
  const LottieAnimation = () => {
    const [animationData, setAnimationData] = useState(undefined)
    useEffect(() => {
      import('@data/Patterns_Peach.json').then(setAnimationData)
    }, [])

    if (!animationData)
      return (<p> Loading</p>)
    return (
      <Lottie
        animationData={animationData}
        loop={true}
        playSegments={playFrames}
        autoplay={true}
        rendererSettings={{ preserveAspectRatio: 'xMidYMid slice' }}
        style={{ height: '100%' }}
      />
    )
  }
  return (
      <LottieAnimation />
  )
}
export default PageHeader_VariableHeight

Animation always plays at least twice

Describe the bug
When playing an animation the first loop is not 'registered' by the library.

To Reproduce
Steps to reproduce the behavior:

1. Create a fresh react app using create-react-app and install lottie-react
2. Add a Lottie component to the app and subscribe to the onLoopComplete callback
3. Start the server and play the animation
4. Error: Only starting from the second time the animation plays the onLoopComplete callback is called.
5. Set the Lottie component to loop=false
6. Play the animation
7. Error: Animation plays twice

Expected behavior
Animation plays only once when loop is set to false.
Animation calls onLoopComplete after every loop.

Desktop (please complete the following information):

• OS: Macos 11.6 (Big Sur)
• Browser: Chrome, Firefox, Safari
• Version: 2.2.1

Workaround I'm using currently:
Play the animation with the playSegments function with [0, total_frames]

Welcome!

Hi! First of all, thanks a lot for making this library! I was about to do the same when I found this repo. I have been using Lottie a lot in my react native project and I wanted to use it also in my react projects.

I have a few questions though. Is there any particular reason of why naming the component Animator? I mean, I'd prefer the API to feel the same as when using lottie-react-native (where the component is exported default so you can name it whatever you want, although is usually named LottieView). Why not going with just Lottie?

Also, I could not think of a use case for the useAnimator hook, would you give an example of why it is needed or useful?

Lastly, I really look forward for this to be a commonly used library so I would like to offer you my help in getting it there. Let me know if I can help ;)

Change animation quality

Hello there! I've used this wrapper in quite many different projects and everything was pretty smooth. Lately, I've noticed some performance issues affecting some animations, so I'm trying to improve them.

According to the official lottie-web documentation, it should be possible to use the global .setQuality() method, which should help to reduce the resources to render the animation, but it looks like this method is not available from this react wrapper. Am I right? Or I just don't know how to use it?

Animation loops not limited to specified count

Describe the bug
After upgrading to version 2.2.1 of lottie-react, limiting the animation to a fixed number of loops does not work.

To Reproduce

1. Install v2.2.1 of lottie-react (e.g. in a fresh Create-React-App project)

2. Add the Lottie component:

    <Lottie animationData={data} loop={2} />
   

3. Open in browser, the animation will run indefinitely, as if loop={true} was set.

Expected behavior
The animation should play for the specified amount of loops.

Desktop (please complete the following information):

• OS: Linux
• Browser: Chromium
• Version: 2.2.1

Additional context
The problem was not present with version 2.1.0. It feels like this might be related to #48.

Cannot read properties of undefined (reading 'length')

I am trying to set lotties from a CDN, while doing so, I get an error Cannot read properties of undefined (reading 'length')`
This is my code :

{missions.map((mission : any) => 
   (
<div className='bg-[#000000] flex-1'>
<Lottie animationData={mission?.manuscript?.asset.url} loop={true} />
</div>
   )}

The mission?.manuscript?.asset.url} is not undefined !

typescript support?

Where i can find "@types/lottie-react"?

Decrease bundle size impact by using lottie light

Describe the solution you'd like
Use the lottie light variant like described here: airbnb/lottie-web#1184 (comment)

Wrong type for LottieComponentProps

Describe the bug

Adding a path prop to the Lottie component is giving me a type error saying the path does not exist on the component props

To Reproduce
Add path prop to the component

Expected behavior
Don't show me a type error

Screenshots

Property 'path' does not exist on type 'IntrinsicAttributes & Omit<AnimationConfigWithData<"svg">, "container" | "animationData"> & { animationData: unknown; lottieRef?: LottieRef | undefined; ... 9 more ...; onDestroy?: AnimationEventHandler<...> | ... 1 more ... | undefined; } & Omit<...> & { ...; }'.

is possible run with uri in react.js

Hi, ı have lottie files in my cdn server and ı want to run with uri. is it possible ?

Not working with next js

Describe the bug
I use this package with nextjs. Lottie animation works locally but doesn't work on production build, it's not showing and throwing tons or the same errors :

next version 13, lottie-react version 2.3.1

How can I fix this?