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

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:

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.

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.

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:

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.

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:

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

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.

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.

https://stackblitz.com/edit/angular-ivy-lfckkn

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