CPU usage is verrrrrry high

[BabakScript]

Overview

I have 4 Lottie animations on my page. I downloaded them from lottiefiles.com but after adding these animations the CPU usage of the page and my system increased a lot. It's always between 80% to 100% and the laptop fan is working constantly but after closing the page everything is OK. Is it normal with Lottie animations? This is just a small personal website with 4 small Lottie animations. Also, the size of my animation files is between 70 KB to 350 KB. I also tried to set subframe to false to save some CPU but that's not improve anything:

<Player
                lottieRef={instance => {
                  instance.setSubframe(false)
                }}
                autoplay
                loop
                src={item.animationUrl}
                className="h-[250px] w-[250px]"
              />

Any suggestions for improving the page and CPU performance?

Consuming repo

What repo were you working in when this issue occurred?

...

Labels

• [ ] Add the Type: Bug label to this issue.

[humirang-j]

I also encounter this issue, not only the CPU usage also the memory is too big. when I disabled all my Lottie animations my web app has about 200mb memory but when I enabled it reaches 400mb - 500mb on initial load then will reach 1GB+ after a few seconds.

I have a dynamic number of Lottie animations.

[Exkalybur]

We are running into similar issue, where CPU and GPU usage is going beyond acceptable, even when using only 2 lottie files and not much of other stuff going on the page.

Without lottie, CPU is at around 10% and GPU around 20%, while running about 30 chrome tabs, slack, vs-code, terminals and the web app itself. With lottie, CPU usage jumps to about 60-70% and GPU goes to 80%.

Something seems off with the way the resources are consumed, 2 small files shouldn't increase usage of resources as much as it currently does.

Would be great to hear something from maintainers, since this issue soon to be 2 months old and 0 replies.

[samuelOsborne]

Hi @BabakScript It could be good to go per animation and see which one is causing large CPU usage, 350kb is on the large size for Lotties.

You can also create an issue on the lottie-web repo and upload your files to get help with your animations and see why they're causing large CPU usage: https://github.com/airbnb/lottie-web

[deshario9]

I'm also experiencing the same issue

The memory is not being freed up/remains occupied even after the animation is closed/destroyed.

Playing multiple animations sequentially will eventually result in a browser crash.

I've multiple animations, each with a size of 2.5 megabytes.

[saul-data]

I am experiencing the same high CPU usage - I tried the suggestion here: https://github.com/airbnb/lottie-web/issues/2427#issuecomment-761683698

[samuelOsborne]

@deshario9 Does your animation use a repeater? This is from the docs

animationData: an Object with the exported animation data. Note: If your animation contains repeaters and you plan to call loadAnimation multiple times with the same animation, please deep clone the object before passing it (see https://github.com/airbnb/lottie-web/issues/1159 and https://github.com/airbnb/lottie-web/issues/2151.)

[github-actions[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 7 days if no further activity occurs.

[mnlbox]

Any plan to fix this issue?

[github-actions[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 7 days if no further activity occurs.

[aleczratiu]

Any updates here?

[github-actions[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 7 days if no further activity occurs.