search

airbnb / lottie-web

Render After Effects animations natively on Web, Android and iOS, and React Native. http://airbnb.io/lottie/
MIT License
29.91k stars 2.85k forks source link

A lot of Lottie animations on website causing high CPU and GPU usage #2427

Open iterable-marketing opened 3 years ago

iterable-marketing commented 3 years ago

Hello, our website is using a lot of Lottie animations to create an engaging visual experience, but it causes CPU and GPU usage rates to increase significantly. My fans turn and stay on until I exit the site.

Does anyone have guidance or recommendations on how we can alleviate this issue when we use a lot of Lottie animations? Would reducing the amount of movements in the animation file help?

bodymovin commented 3 years ago

Hi, you could try calling on all animations anim.setSubframe(false), which will render only rounded frames and not subframes. What can also help is making sure that only the animations that are visible on the screen are running, and pause all the rest. There is also one of the animations, Activate21_LP_Tickets, which seems to be using a Matte effect. Those effects are very resource intensive, and you might achieve the same by using regular AE masks.

jmorganslea commented 3 years ago

I am also having this problem on this website www.longbaycollege.com yet the lottie is a pretty small file. Does anyone have any ideas?

msbt commented 1 year ago

@bodymovin I also have issues with high cpu usage. I'm using the web player, where would I put that call?

harveyjing commented 1 year ago

I am also having this problem on this website www.longbaycollege.com yet the lottie is a pretty small file. Does anyone have any ideas?

just got into your website, and it is pretty good. But just found that nav bar font color doesn't differ enough from bg color. I just wonder if you have a fixed header and scrollable carousel. that have fixed bg color. just a little recommendation.

saul-data commented 1 year ago

I am experiencing the same - very high CPU usage and I tried to apply anim.setSubframe(false) on all my animations but doesn't improve anything

Here is the link to my animation json: https://gist.githubusercontent.com/saul-data/6c8550c4f6247068c48137b72e9b0f47/raw/f29546f3b51a807fa5274bb1e1db5df8b848a0ee/animation.json

Using the online player - 20% to 30% CPU usage:

image
saul-data commented 1 year ago

Even the default examples uses quite a lot of CPU

image image
laeo commented 7 months ago

Im using lottie-svelte but also reach the same issue, when i play the sample animation provided by lottie-svelte docs, the CPU reaches about 40%, and down to 0 after i clicked stop button.

danilo-css commented 3 weeks ago

Im using lottie-svelte but also reach the same issue, when i play the sample animation provided by lottie-svelte docs, the CPU reaches about 40%, and down to 0 after i clicked stop button.

I had the same problem using JSON animation files. Solved it using ".lottie" files instead.