lottie-web | Effects animations natively on Web Android iOS | iOS library

 by   airbnb JavaScript Version: 5.12.2 License: MIT

kandi X-RAY | lottie-web Summary

kandi X-RAY | lottie-web Summary

lottie-web is a JavaScript library typically used in Telecommunications, Media, Media, Entertainment, Mobile, iOS, React Native applications. lottie-web has no bugs, it has no vulnerabilities, it has a Permissive License and it has medium support. You can install using 'npm i wibbitz-lottie-web' or download it from GitHub, npm.

Render After Effects animations natively on Web, Android and iOS, and React Native.

            kandi-support Support

              lottie-web has a medium active ecosystem.
              It has 28525 star(s) with 2849 fork(s). There are 447 watchers for this library.
              There were 2 major release(s) in the last 6 months.
              There are 653 open issues and 2099 have been closed. On average issues are closed in 182 days. There are 38 open pull requests and 0 closed requests.
              It has a neutral sentiment in the developer community.
              The latest version of lottie-web is 5.12.2

            kandi-Quality Quality

              lottie-web has 0 bugs and 0 code smells.

            kandi-Security Security

              lottie-web has no vulnerabilities reported, and its dependent libraries have no vulnerabilities reported.
              lottie-web code analysis shows 0 unresolved vulnerabilities.
              There are 0 security hotspots that need review.

            kandi-License License

              lottie-web is licensed under the MIT License. This license is Permissive.
              Permissive licenses have the least restrictions, and you can use them in most projects.

            kandi-Reuse Reuse

              lottie-web releases are not available. You will need to build from source code and install.
              Deployable package is available in npm.
              Installation instructions, examples and code snippets are available.
              lottie-web saves you 132 person hours of effort in developing the same functionality from scratch.
              It has 216 lines of code, 0 functions and 189 files.
              It has low code complexity. Code complexity directly impacts maintainability of the code.

            Top functions reviewed by kandi - BETA

            kandi has reviewed lottie-web and discovered the below as its top functions. This is intended to give you an instant insight into lottie-web implemented functionality, and help decide if they suit your requirements.
            • create the worker instance
            • Manages map function
            • Decorators for the keyframe .
            • Init an expression
            • Function that returns the point on the line .
            • Seed the generator
            • Interpolation - interpolation frames
            • Creates a mask .
            • Renders the gradient .
            • Load font from the list of font files .
            Get all kandi verified functions for this library.

            lottie-web Key Features

            No Key Features are available at this moment for lottie-web.

            lottie-web Examples and Code Snippets

            No Code Snippets are available at this moment for lottie-web.

            Community Discussions


            Cannot find name 'GlobalCompositeOperation'
            Asked 2022-Apr-10 at 13:59

            While working with ng-lottie for animations. It is suddenly having build issues. Know more .

            Hence, in search of alternatives I am trying ng-particles.

            I have installed it and added the configs as per docs.

            But, now I am getting Cannot find name 'GlobalCompositeOperation'




            Answered 2022-Apr-10 at 13:59

            this an issue with typescript version and for me details you can take a look at here :


            Source https://stackoverflow.com/questions/71796111


            Targeting specific Lottie animations on hover with lottie-web in React
            Asked 2022-Feb-27 at 11:53

            How to target with hover a specific animation when I have multiple lottie animations on the same page in React using lottie-web. lottie-web documentation states that in the lottie.play() I can insert a name parameter to target a specific animation, so I did this lottie.play(container), but it didn't work.



            Answered 2022-Jan-28 at 02:37

            Ok I dug deeper while waiting for answers and found that I need to give a name to each animation instead of using the container name like so name: "animationOne" and refer to it later, so my code would look like this:

            Source https://stackoverflow.com/questions/70887917


            Angular build - Unmatched selector: %
            Asked 2022-Jan-22 at 10:11

            When I run npm run build which executes ng build -c production build will be completed as expected. But command prompt will be filled with this warning:



            Answered 2021-Dec-01 at 14:18

            can you try to put the following into your ".browserlistrc" file. The file is located in the root directory of your project.

            last 1 Chrome version
            last 1 Firefox version
            last 2 Edge major versions
            last 2 Safari major versions
            last 2 iOS major versions
            Firefox ESR
            IE 11

            This once helped me to fix the error.

            Source https://stackoverflow.com/questions/70185738


            Trigger event on animation start with lottie-web
            Asked 2022-Jan-12 at 16:29

            I am currently working on a next.js application and my goal is to have a "greeting animation" with sound.

            I am having problems triggering an event when the animation starts, so I can start the music synchronized.

            This is my code, which displays the animation but does not log anything:



            Answered 2022-Jan-12 at 09:52

            Seeing as you autoplay the animation, you can listen for the "DOMLoaded" event or if you wanted the "enterFrame" event and then ignore subsequent calls to your callback, as it will be called on every frame played of your animation.

            Source https://stackoverflow.com/questions/70675841


            Angular build - Expected identifier but found "*"
            Asked 2022-Jan-04 at 16:12

            After upgrading to angular 13.0.0 this warning occur when building:



            Answered 2022-Jan-04 at 16:12

            Angular is removing support for IE 11.

            There is 2 ways to confront that matter:

            1. Remove support for IE 11 from .browserslistrc or browserslist:

            Source https://stackoverflow.com/questions/70185820


            Angular TSLint - Cannot find builder "@angular-devkit/build-angular:tslint"
            Asked 2022-Jan-04 at 13:18

            When I try to run command ng lint --fix cli throws this error:



            Answered 2021-Nov-28 at 10:34

            From v13 angular doesn't use tslint anymore due to deprecation.

            Run ng add @angular-eslint/schematics to add eslint to your application.

            It will use tslint-to-eslint-config to migrate you to eslint automatically.

            It will generate a .eslintrc.json file and migrate tslint.json to it.

            Nothing else is needed to be done.

            Source https://stackoverflow.com/questions/70141707


            React/gatsby with Lottie animation bottlenecks the DOM
            Asked 2021-May-08 at 17:29

            I have 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:



            Answered 2021-Apr-19 at 23:04

            Well, I sorted it out myself, turns out it is a memory leak and happens if some of the Lottie animations us a 'repeater'

            Solved it by stringify the JSON: const contactAnimation = JSON.parse(JSON.stringify(data))

            So full code becomes:

            Source https://stackoverflow.com/questions/67169928


            How to preserve aspect ratio upon resizing browser containing a react-lottie component?
            Asked 2021-Mar-16 at 16:48

            I have a Lottie animation that is rendered using react-lottie (https://www.npmjs.com/package/react-lottie)



            Answered 2021-Mar-16 at 16:48

            Yes, thank you, I started it at home, but you have the width and height values set for the Lottie component. If you want Lottie to change its size depending on the size of the screen, then you need to add a hook to change the screen.

            Hook resize

            Source https://stackoverflow.com/questions/66645837


            let variable is undefined in useImperativeHandle function
            Asked 2021-Jan-26 at 11:43

            I work with the lottie-web package in a .web.js file under React Native (Expo).

            My problem is that the let variable anim is undefined in the functions in useImperativeHandle. In the useEffect anim works wonderfully. For example if I access anim.play() right after the initialize at useEffect it works. But at the play() function in imperative it doesn't work.

            At my parent component I create a ref with useRef and pass the ref to the component



            Answered 2021-Jan-26 at 11:43

            That because React has no clue what anim is when it creates API functions in useImperativeHandle (duo to closure and react updating strategies which don't trigger any update by mutating a variable). There is some way you can handle this, after all, it comes to personal opinion what to do, I will use something like this which work the best for me.

            Add GetApi Function

            Source https://stackoverflow.com/questions/65900451


            Ionic/Angular + Lottie: animate each Lottie individually?
            Asked 2020-Jul-24 at 14:15

            Before I go on, I should note I posted a similar question earlier, with a similar content to this one, BUT I thougth that the source of the bug was using a custom-component inside an ngFor loop. I have seen that is not the issue, so I have deleted the original question to make my query more accurate and to not mislead anyone.

            I am currently working on a project using Ionic 5 and Angular 9 where we have to use lotties in certain views. I am using the ngx-lottie library (https://github.com/ngx-lottie/ngx-lottie#api) and for my purposes, instead of inserting the lottie within the template in each view as the library's API shows, I have built a component to be included within other views. The code for said component is as follows:



            Answered 2020-Jul-24 at 14:15

            I put together a stackblitz showing what I think your problem is, the fact that all the components are being passed the same state instance.


            The first array of divs all have a single state inside the parent, so toggling it in one updates all of them.

            The second one of app-cards are all their own component that have their own state. Note that since we are still passing the global state in as an input, while changing it internally it wont update the others but if its updated at the parent level it will push that new value down to all the children.

            Child component example

            Source https://stackoverflow.com/questions/63074388

            Community Discussions, Code Snippets contain sources that include Stack Exchange Network


            No vulnerabilities reported

            Install lottie-web

            Or you can use the script file from here: https://cdnjs.com/libraries/bodymovin Or get it directly from the AE plugin clicking on Get Player.


            For any new features, suggestions and bugs create an issue on GitHub. If you have any questions check and ask questions on community page Stack Overflow .
            Find more information at:

            Find, review, and download reusable Libraries, Code Snippets, Cloud APIs from over 650 million Knowledge Items

            Find more libraries
          • npm

            npm i lottie-web

          • CLONE
          • HTTPS


          • CLI

            gh repo clone airbnb/lottie-web

          • sshUrl


          • Stay Updated

            Subscribe to our newsletter for trending solutions and developer bootcamps

            Agree to Sign up and Terms & Conditions

            Share this Page

            share link