Jump to content
Search Community

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

Husni S test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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 comment
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 ?editors=0010 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 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...