Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
remjx

Scale transform is not smooth in Firefox

Recommended Posts

My animation (a small, pulsing circle) is perfectly smooth in Chrome but jerky/laggy/unsmooth in Firefox. I tried the following fixes as some others recommended:

  • Set a small rotation
  • Set force3D: false in GSAP animation
  • Set will-change: transform on css element

 

But it has no effect.

 

Is it still true that Firefox is just bad at rendering animations and the issue is unrelated to GSAP? Are there any workarounds?

 

There are a bunch of other posts in this forum about unsmooth Firefox animations, but I could not find any solutions that solve the problem.

 

Thank you.

See the Pen QWpoNJG by geminix (@geminix) on CodePen

Link to comment
Share on other sites

Hi remjx!

 

Firefox is just slow, and there's probably not a lot you can do about that. 


Unrelated to performance, it's best to let gsap handle the transforms for you.

 

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

 

For percentage x and y, use xPercent and yPercent.

 

gsap.to(".foo", {
  xPercent: -100,
  yPerent: 25,
  x: 20,
  y: 100
});

 

  • Like 1
Link to comment
Share on other sites

I'm not seeing the issue. I also didn't see you implementing any of those strategies in the CodePen you posted @remjx. Am I missing something? 

 

I have definitely seen Firefox doing pixel-snapping but I'm not convinced it's actually performing poorly. Pixel snapping just makes it LOOK like it's jittery (because of the snapping). 

Link to comment
Share on other sites

Hello @remjx,

 

Sometimes I find that just adding a small translateZ, makes it less jittery on Firefox (and sometimes Safari).

Does this look smoother ?

See the Pen eYvwXgB by sueharaluke (@sueharaluke) on CodePen

  • Like 1
Link to comment
Share on other sites

3 hours ago, GreenSock said:

I'm not seeing the issue.

 

It only happens on Windows, and makes it appear like the animation is running at very low frame rate.

 

I've tried everything, including using an SVG. The only way to make it look smooth is to use canvas, which isn't an option for most.

 

See the Pen 07b66716541a68c188ba37efa893923e by GreenSock (@GreenSock) on CodePen

 

  • Like 1
Link to comment
Share on other sites

 

Hello @OSUblake and @GreenSock, nice to meet you !

(Old posts of yours have always helped me, so I feel like I already know you guys already ! haha)

 

3 hours ago, GreenSock said:

I'm not seeing the issue.

 

14 minutes ago, OSUblake said:

It only happens on Windows

 

I was actually able to reproduce it on Mac, but it's only noticeable if you really zoom in. (Pinched to max size with trackpad)

Original on the left and translateZ added on the right:

 

  • Like 3
  • Thanks 1
Link to comment
Share on other sites

3 hours ago, Rukasu said:

Sometimes I find that just adding a small translateZ, makes it less jittery on Firefox (and sometimes Safari).

 

That seems to do the trick, at least for this animation.

  • Like 2
Link to comment
Share on other sites

@Rukasu @OSUblake it works! Thank you!!!!

 

For the record, yes my testing was on Windows 10 and Firefox 89.

  • Like 1
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.
×