Jump to content
Search Community

CPU overload on Firefox browser

Luiz Felipe test
Moderator Tag

Go to solution Solved by Cassie,

Recommended Posts

Hi guys,

 

I'm a newbie using GSAP and i read lot of things about Firefox poor performance using transform/translate properties. Now, i'm working on a website project that uses GSAP as base for the animations. I have something about 50 elements animated on this page, and the most are images and SVG's and i use the intersectionObserver to animate them in when the element is displayed on the screen.

 

However, 2 of these animations are destroying my page performance (only in Firefox Browser), and i'm trying to fix that by GSAP configs, but i realized i'm getting an overload on CPU when i access the website by the Firefox Browser. If i disable those 2 animations, i get a considerable improvement in performance, but overall performance is still lower than other browsers. Please find the comparision below:

 

image.thumb.png.4ffe35f8943c1bbbc7cbcb849ea45dcf.png

Here i'm accessing the website via Microsoft Edge and the CPU/GPU load looks good (everything OK with the website performance).

 

image.thumb.png.34fd596416a54f557bb56f8749a88909.png

Here i'm accessing  the website via Firefox, and i'm getting a 'little' CPU overloading (poor poor poor performance).

 

How can i set the GSAP to prioritize to use the GPU instead of CPU on Firefox?

I've tried 4 different browsers and this nightmare only happens on Firefox...

See the Pen gOzrdVG by gitBiohazard (@gitBiohazard) on CodePen

Link to comment
Share on other sites

Hey there! 

 

This isn't down to GSAP I'm afraid, this is down to Browser rendering and we don't have any control over that. It's a bummer when you hit up against stuff like this though. Sorry.

SVG is less performant than DOM or canvas, and animating properties like text offsets especially so.

You could look at remaking this using the motionPath plugin, or potentially give canvas a go?

  • Like 3
Link to comment
Share on other sites

On 9/10/2022 at 5:54 AM, Cassie said:

Hey there! 

 

This isn't down to GSAP I'm afraid, this is down to Browser rendering and we don't have any control over that. It's a bummer when you hit up against stuff like this though. Sorry.

SVG is less performant than DOM or canvas, and animating properties like text offsets especially so.

You could look at remaking this using the motionPath plugin, or potentially give canvas a go?

Hey!

 

Thanks for reply.

I considered using canvas, but I confess I have no idea where to start. Can I use GSAP to animate graphics rendered in 2D and 3D contexts?

And if I choose to use the motionPath plugin, will I see possible performance gains?

Link to comment
Share on other sites

  • Solution
Quote

I considered using canvas, but I confess I have no idea where to start. Can I use GSAP to animate graphics rendered in 2D and 3D contexts?

Yeah canvas definitely requires a little bit more of a deep dive. But yes you can use GSAP to animate pretty much anything. There are a lot of threads in these forums about canvas if you decide to go that route.

 

Quote

And if I choose to use the motionPath plugin, will I see possible performance gains?

Possibly? I don't see any perf issues with you pen in the first place so I can't say for sure. Why don't you take a look at this thread first and do some perf tests on the demos in the article. That's probably a good starting point.

 

  • Like 2
Link to comment
Share on other sites

19 hours ago, Cassie said:

Yeah canvas definitely requires a little bit more of a deep dive. But yes you can use GSAP to animate pretty much anything. There are a lot of threads in these forums about canvas if you decide to go that route.

Maybe that will be the best solution for me. I'll take my way.

I appreciate your help pretty much! Thousand thanks!

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...