Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Husni S

scale animation not smooth/jerky in firefox quantum v60.0.1

Recommended Posts

Hi

 

can anyone please help me find what is wrong with this animation, it works very well in chrome and IE but very slow and jerky n firefox.

 

thanks

See the Pen xzKYeE by husnis (@husnis) on CodePen

Link to post
Share on other sites

I didn't see huge problems in Firefox, but I'm curious:

  1. Why did you set the CSS to translateX(100%) initially? Does it work better to just set visibility:hidden?
  2. Does it help if you set force3D:true in your tween(s)? 

Keep in mind that you've got a VERY big SVG that you're asking the browser to re-render on every tick. Basically every pixel in the viewport is changing and that's a big task for the browser (unrelated to GSAP). 

 

If it's a graphics rendering issue, perhaps try swapping out the SVG artwork for a JPG/GIF/PNG just to see if it's better. You could always consider using that during the animation, and then onComplete swap in the SVG if you're looking for resolution independence. But again, none of that has anything to do with GSAP. I'd bet that GSAP's load on the processor is well under 1% of the overall load. Graphics rendering is more CPU-intensive BY FAR, especially with SVG. 

  • Like 3
Link to post
Share on other sites

hi @GreenSock,

 

I have removed my svg and tried to use visibility: hidden and force3D: true.

but I still see in firefox not too smooth. anything wrong with my code or firefox?

 

See the Pen YvKMvK by husnis (@husnis) on CodePen

 

thanks.

Link to post
Share on other sites

I think the biggest issue is just that you're starting with something that fills the screen and scaling that 4x and animating it down. So let's say your screen is 1,000 by 1,000 - that means the browser is having to calculate 16,000,000 pixels initially, and gradually get down to 1,000,000. So even though you're scaling by 4, it's actually 16 times as many pixels. That's a lot of pixels!

 

You could try setting will-change: transform in your CSS for the animating element, but be careful: https://greensock.com/will-change

 

You could also make things more efficient by using a single tween instance and just reusing it (play() it to open, reverse() to close) and force it to render initially (before any clicks so that the start/end values are pre-recorded) like:

 

See the Pen e596b830d050fd766c513cd28dd12f86 by GreenSock (@GreenSock) on CodePen

 

But again, I think the biggest issue here is the amount of stress on the browser to do graphics rendering. Canvas would probably perform faster. For example, you could use PixiJS. But I realize that means rebuilding a lot which may not be fun. 

 

I wish there was a silver bullet that GSAP had that could magically save the browser from its graphics rendering load. 

 

  • Like 5
Link to post
Share on other sites

@GreenSock okay thank you very much for the perfect answer! now I understand the problem better

  • Like 1
Link to post
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.

×