animation high GPU load

[batobolg]

I using google chrome monitoring GPU load, animating-icons is spend a lot GPU load. https://fontawesome.com/v5.15/how-to-use/on-the-web/styling/animating-icons it is the simple animation why use so mach GPU? BTW. I am using SVG version.

[tagliala]

Hi!

Thanks for being part of the Font Awesome Community.

I think we can't do much about this, but any hint on how to improve the performance of this animation is welcomed

On my old machine, all animations uses ~ 20% of GPU, and I remember that I did some tests with 3D animations at the time but the results were the same

Demos:

• Without Font Awesome (2D Transform): https://jsfiddle.net/tagliala/vbhdn9te/35/
• Without Font Awesome (3D Transform): https://jsfiddle.net/tagliala/vbhdn9te/34/

SVG and CSS implementations have the same performance:

• Font Awesome CSS: https://jsfiddle.net/tagliala/vbhdn9te/22/
• Font Awesome SVG: https://jsfiddle.net/tagliala/fmo25dxa/22/

SVG with 3D rotation is not much better:

• https://jsfiddle.net/tagliala/fmo25dxa/25/

Bootstrap spinners seem to have the same performance:

• https://getbootstrap.com/docs/5.1/components/spinners/#colors

@robmadole should we add a performance warning on the docs?

edit: on my Mac I'm getting the best results with 2D transform and CSS