Jump to content
GreenSock

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

Is it me or... Firefox?

Recommended Posts

Hello,

I was wondering, does anyone see lag when playing animations on Firefox?

I made just a few animation so far as I am a "newbie gsap coder", what I have experienced is that those animations are smooth in chrome, safari and IE but they lag a lot in Firefox.

At first I thought I was coding in the wrong way my scripts but then I saw that even the animations in the "Examples" page have the same problem (eg. https://www.reputationsquad.com/).

 

 

What I see is that this doesn't seem a GSAP problem but is like Firefox is having hard times with all kind of animation methods.

 

I tested it both on my macbook pro retina (late 2015)  and on a mac mini, in both cases if I try to open a website like:

http://beta.wind-and-words.com/ (examples page), the fan start working at max power! Like when you render an After Effects animation with all your cores.

 

Do you have the same problem? Do you know any solution or workaround?

 

Thanks guys!

Link to comment
Share on other sites

Hello frivolta, And Welcome to the GreenSock!

 

Can you please explain in detail what exactly what animations on the page are lagging in Firefox. Like what do we have to do to reproduce what you are seeing. It will probably be best to create a limited codepen example with a couple of tweens showing what you describe. Since it will be hard to debug through all teh code on your website.

 

In Firefox if you are translating in x, y, or z you will need to add a slight rotation like rotation: 0.01 to your tween

 

Here is a video on how to create a reduced codepen demo example so we can test yoru code live:

 

 

Thank you!

  • Like 2
Link to comment
Share on other sites

It was just a general question, as it seems to me that firefox is having hard times rendering animations compared to other browsers. So far I have tested the website in the example section and everything works fine in Safari/Chrome/IE... but when it comes to Firefox animations are not rendered as smooth as other browsers (all kind of animations not just gsap ones), is it a known issue? It happens only to me?

Link to comment
Share on other sites

Hello again frivolta

 

That is why i recommend you add the slight rotation: 0.01 to your tweens that use scale, x, y, or z .. and the jank will disappear. What is happening is a pixel snapping bug in Firefox, but once you add the slight rotation it becomes smooth. Tested and works on Windows 7, Windows 10 and OSX latest Firefox version.

 

When you add the slight rotation that tells the browser to make it render with the GPU which will make the tween use either translate3d() or matrix3d() and then the browser will push those pixels to be drawn on a new rendering layer using hardware acceleration. And in this case will resolve the pixel snapping that cause the jank (lost frames).

 

Also without an example we cant assist you properly since its is very hard to debug an entire website, That is why we ask for a limited codepen with the tween giving you trouble. :)

  • Like 2
Link to comment
Share on other sites

  • 1 year later...

Hi @Jonathan, @PointC, @Carl 

I have found a work around to this Firefox jank problem, but I'm not sure if it's a potentially terrible idea?

 

On a localhost dev site I noticed the animations were very janky in Firefox for the reasons stated above in the thread, because of the nature of the animations, adding the rotation property, although improving things slightly in FireFox, didn't fix things completely (I also have a static rotation on an element being animated so this created other side effects).

 

I noticed however that my Contact Page animations were all silky smooth compared to other pages, and the animations were virtually the same amount of code and with similar transforms / scale values etc?

 

The reason it was animating OK on the Contact Page is because this page is a 100vh single section so everything apart from the footer is above the fold.

 

On my other pages I wrapped the page content below the fold in a wrapper div, and in the JS file I set it to `display: none` for Firefox browser versions, and then used a setTimeOut function that switches it to 'display: block' after the duration of the animation, and hey presto everything animated buttery smooth.

 

Below is the code I used:

 

My main reservations are that:

 

a) when reloading the page it will effectively always return to the top of the page,
b) I'm worried there may be an SEO hit for initially hiding so much content,

c) it just seems like a really terrible idea even though it works really well.

Feel free to chip with any thoughts, I'm not particularly advanced with JS or GSAP, so would appreciate any comments
 

var mainContent = document.getElementById("main-content");
var ff = navigator.userAgent.toLowerCase().indexOf('firefox') > -1;


if ( ff ) {

    mainContent.style.display = "none";

    // SET TIMEOUT ON EVERYTHING BELOW SECTION ONE ON LOAD
  
    window.setTimeout(function() {

        mainContent.style.display = "block";

    },2000)

}

 

 

 

 

Link to comment
Share on other sites

Hi @pauljohnknight

 

Here is a better way to detect if the browser is Firefox, It uses feature detection since using the useragent can be spoofed.

 

var FF = !(window.mozInnerScreenX == null);
if(FF) {
    // is firefox 
} else { 
    // not firefox 
}

 

Be careful with hiding the content like that Google will ding you for hiding content to increase ranking. But you will have to test and see what Google is doing in your case. Google still dings for using high values of text-indent.

 

Do you have a limited codepen demo example? Since it will be hard to even see what your GSAP specific code is doing or what it looks like. Also i noticed you are using canvas on that page, so be careful since canvas can be a resource hog, especially on mobile draining your battery.

 

Happy Tweening!

  • Like 5
Link to comment
Share on other sites

Hi Jonathan,

 

I'll try and set up a simplified example to show the jank. Also, I'm not using canvas, it's all SVG - I think you're referring to the original poster at the top of the thread who was someone else. I was chipping in because I did a search on GSAP jank in Firefox.

 

Many thanks,

 

Paul.

  • Like 1
Link to comment
Share on other sites

Hello

 

This post has the perfect title for my issue.

 

I’m new to GSAP and I have no idea where to begin to debug this issue which only occurs in Firefox.

 

Here is a link to a draft of the project (please don’t share this link): http://zirkon.prolog.work/

Push «Start» to see the animation. It works great in Chrome, Safari and Opera. Sadly it dosen’t work at all in Firefox 61.0.1 (macOS High Sierra 10.13).

 

Error Message: TypeError: d is null TweenMax.min.js:15:23873

 

It seems that something in the TweenMax.min library dosen’t work for Firefox.

 

Thanks,

Daniel

 

 

 

Link to comment
Share on other sites

Sorry to hear about the issue, @Daniel Eytan Schneider. It's very difficult to troubleshoot a live site with minified code - is there any way you could provide a reduced test case in codepen or something? At the very least, using the unminified version of TweenMax would help. We're not aware of any GSAP bugs related to Firefox, but I'm very curious to see what's going on here. I'm traveling at the moment and don't have time to pull everything apart on your site, but a reduced test case would be amazingly helpful. Oh, and it's usually best to start your own thread instead of jumping into an old one.

  • Like 4
Link to comment
Share on other sites

Hello  @Daniel Eytan Schneider and welcome to the GreenSock forum!

 

When i debug your code in Firefox I can see that it throws an error in the file sketch-3.js on line 131.

 

TypeError: d is null

 

TweenLite.set(noodle, { scale: scaleNoodles, transformOrigin: "center center" });

 

It seems that noodle variable might be null or other properties based on that null variable can be throwing other TypeErrors. noodle is declared on line 125, so something is happening with that.

 

var noodle = document.createElementNS("http://www.w3.org/2000/svg", 'path');

 

You might want to insert or append your created SVG element in the DOM before tweening or setting any CSS properties, that might be causing your issue.

 

But unfortunately like @GreenSock Jack advised its very difficult to debug minified code and especially code that is massively long to debug on a live site. You should reduce your code bit by bit, so you can eliminate the problem parts. This way you can narrow down your issue. Firefox is very picky when it comes to creating elements with createElementNS().

 

So try commenting out all your code, and slowly un-comment out different parts so you can find the problem.

 

Happy Tweening :)

 

 

  • Like 5
Link to comment
Share on other sites

Dear Jack and Jonathan. Thanks a lot for the fast respond and the tipps.

 

1 hour ago, Jonathan said:

 

You might want to insert or append your created SVG element in the DOM before tweening or setting any CSS properties, that might be causing your issue.

 

Now I know where to start debugging :) I try that and let you know if I was successfull.

 

15 hours ago, GreenSock said:

Oh, and it's usually best to start your own thread instead of jumping into an old one.

 

Ok good to know. Will do that in the future.

 

All the best from Basel, Switzerland

Daniel

  • Like 1
Link to comment
Share on other sites

Changing the orders solved it! Thanks Jonathan, you saved me a lot of time!

I will send a link when the site is published!

 

Best,

Daniel

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