Increased recalculations per second (+CPU usage etc.) when used with other animations

[kevinmitch14]

When using COBE alone on my pages, everything works well.

However when I use COBE along with a marquee animation, performance really suffers. Recalcs/second is 60 continuously and CPU usage is pretty high.

The problem only happens when using both together, when I use either alone, there is no problems with perf. Is this behaviour expected?

The same issue can be seen on https://vercel.com/ homepage when scrolling down to the COBE implementation, recalcs are at 60 per second and CPU usage is high.

However when I remove the marquee animation from the DOM on https://vercel.com/, we go back to 0 recalcs per second.

The desired performance can also be found on https://dub.sh/ implementation without making any changes.

I know it is possible to conditionally use the globe with Intersection Observer but it seems weird that the issues only happen when there are other animations on the page. Any help would be greatly appreciated!

[Mayank-Sh07]

I've experienced the same issue while testing a site on a mid-range windows laptop (Intel iris integrated graphics). The webpage works fine on a Macbook Pro (much more powerful GPU) but there's a lot of jitter on the windows laptop. The globe also seems to disappear after a flash of black once I scroll down to the section of the webpage which contains the globe. I'm using around 2-3 infinite animations on the same page (marquee and rotate).

[shuding]

This is a Chrome bug unfortunately: https://bugs.chromium.org/p/chromium/issues/detail?id=1252311

Basically if you have RequestAnimationFrame and CSS3 animations together on a page, a style recalc will be triggered on every frame. I'm afraid that this lib can do nothing about it — one workaround is to disable CSS animations when the canvas is on the viewport, or vice versa.