Jump to content
Search Community

Lag/stutter on background animation in Firefox

gerben test
Moderator Tag

Go to solution Solved by GreenSock,

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

Hi there,

 

I have created this background pattern animation and it works smoothly on safari/chrome/IE but I am experiencing some kind of stutter/lag in firefox. It even causes lag outside the browser when using other programs (OS X/macbook pro).

 

 

I have searched the forum and tried all possible solutions I could find (force3D:true, rotation:0.01, etc.) but no luck.

 

Would really appreciate any help as I am stumbling in the dark here.

 

 

Oh and thanks for an awesome framework! Great stuff!

 

Note: somehow when using codepen the strokes are blurry. This doesn't happen when working on my test server: http://preview.frodoschering.nl/pattern-animation-2/ so probably unrelated to the above issue.

See the Pen ggmzNY by gerben (@gerben) on CodePen

Link to comment
Share on other sites

Hello gerben, and Welcome to the GreenSock forum!

 

This looks at least on my end to be something in codepen causing some lag. Codepen has a lot of users on at the same time so it can and will have code not run right at times.

 

Its weird .. when i was logged out of codepen looking at your codepen examples. I saw the slight stutter or 300th of second pause gap between each animation every 3-4 seconds. But when i logged into codepen and ran it, the stutter disappeared. You can try running your codepen in debug mode or in full mode and see if you still see this stutter pause that happens every 3-4 seconds.

 

Try these links logged in and also logged out of codepen:

 

Runs code without being in an iframe - debug mode

https://codepen.io/gerben/debug/ggmzNY

 

Runs without loading css, js, and html cod panels - full mode

See the Pen ggmzNY by gerben (@gerben) on CodePen

 

You can try and export the code in a zip file and try and run your code locally to see if you still see lag so they dont run off of codepen website

 

:)

  • Like 1
Link to comment
Share on other sites

  • Solution

It certainly seems like a Firefox rendering issue. Have you tried using a png (or any raster image) instead of an SVG? Keep in mind that the browser can't really GPU-accelerate SVG elements. You're asking a LOT of the browser in terms of calculating all those pixels 60 times per second. 

 

Some browsers use certain algorithms based on the size of the image, like if it's less than a certain number of pixels it does one thing but greater than that, another. So perhaps that "lag" you notice is when it hits a threshold in Firefox and it's switching to a different rendering technique. 

 

I'm also curious if you tried using a regular img element instead of a background-image. Browsers sometimes use different rendering algorithms for those (example: http://greensock.com/will-change). 

  • Like 1
Link to comment
Share on other sites

Hi guys, thanks for the quick replies!

 

@jonathan: yes, codepen does seem to add some extra lag/stutters. I am not really bothered by slight stutters of 300th of a second though. It's in firefox where it really starts to get problematic. Did you check in Firefox? Here is an example outside codepen for better reference: http://preview.frodoschering.nl/pattern-animation-2/

 

@jack: I tried a png with the same results. The threshold you are referring too sounds like a possible cause of the problem although I am not sure how I could fix that. I did not try using a regular img element instead of a background-image yet. I will try and see if that helps.

 

I am also wondering if I could do something to change/simplify the animation somehow and improve performance? 

 

Thanks again for the help, really appreciate it!

Link to comment
Share on other sites

Are you talking about the vertical lines sometimes looking like they get fuzzy/sharp/fuzzy/sharp as things are growing? If so, that appears to be just an issue with how Firefox handles sub-pixel rendering and scaling of rasters. Imagine a single column of pixels that lands halfway between two columns of the screen's pixels - how is it supposed to make that look? Some browsers kinda fuzz the line, some make it snap to a row (which can appear jittery). See what I mean? But maybe that's not what you were seeing. I didn't notice any other flickering when I looked in Firefox. 

  • Like 2
Link to comment
Share on other sites

The elements are displaying correctly but there is like a faint flickering on the whole browser window. A bit hard to explain... are you on windows too Jack? I am on macOS so maybe it's mac+firefox specific thing?

 

I also noticed the fuzzy/sharp/fuzzy/sharp thing going on. I think it's acceptable for this animation although it looks a lot better on safari/chrome.

Link to comment
Share on other sites

No, I don't have another system nearby at the moment. I will try when I get the chance. If you don't see the flickering on a Macbook Pro + FF than it seems like it's something related to my specific setup. In any case my initial issue has been resolved.

 

Thanks a lot guys, much appreciated!

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...