Animation slow/jerky (not smooth) in firefox

[jasmeetsehgal]

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

Jas

See the Pen EVpxLO by anon (@anon) on CodePen.

[Jonathan]

Hello jasmeetsehgal, and Welcome to the GreenSock Forum!

 

You need to add a slight rotation to make it smooth, due to a bug in Firefox. rotation:0.01

 

See the Pen PPBZXe by jonathan (@jonathan) on CodePen.

 

window.onload = function(){
    var bg = document.getElementById("bgimg");
    TweenMax.to(bg, 3, {x:"-10px",rotation:0.01,yoyo:true,repeat:-1, ease:Linear.easeNone, force3D:true});
}

Due to Firefox bug - bugzilla #739176  https://bugzilla.mozilla.org/show_bug.cgi?id=739176

 

[jasmeetsehgal]

Thanks Jonathan

[dada78]

Hi Jonathan,

would I need to add force3D also if adding rotation as per your recommendation to smooth out animation on Firefox?

Also, would this mean that I would need to add it to all my tweens?

 

Thanks!

[Jonathan]

Hello dada78

 

No it will work for both 2D and 3D translate. The slight rotation just allows Firefox to translate the element without any jank (lost frames). Due to a Firefox browser bug when translating elements on the x and y axis.

 

Firefox bugzilla #739176  https://bugzilla.mozilla.org/show_bug.cgi?id=739176

 

[kikemx78]

This fix doesn't work for me ...

 

 

http://www.e-sant.com/EA/responsive/

 

Any help???? 

[Jonathan]

@kikemx78 .. When i inspect your code from your link, i do not see my suggestion from above about adding rotation:0.01 on your tweens with a x and y property!

[Black Ducas]

Hi @Jonathan

here is my code, it's a tween of a timeline that it's played by mouseenter event:

 

    timeline.fromTo(preview, {
      scale: 1.1,
      autoAlpha: 0,
      rotation: 0.01, 
      force3D: true,
    }, {
      scale: 1,
      autoAlpha: 1,
      rotation: 0.01, 
      force3D: true,
      onStart: () => {
        preview.style.display = "block";
      },
    }, "<");

but on Firefox it's really awful, jerky and choppy. As you see, I added rotation: 0.01,  force3D: true, but doesn't work. It's caused by scale property.

 

Anyone has solved?

 

 

[ZachSaucier]

@Black Ducas What type of element are you animating? A minimal demo would be helpful.

[Black Ducas]

Hi @ZachSaucier 

when hover a link it triggers the above animation on elements like this

 

          <div class="project-image" 
            style="background-image: url(image.jpg)">
          </div>

with this CSS

 

.project-image {
  display: none;

  will-change: transform;
  
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1;
  overflow: hidden;

  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
  background-color: $color-1;
  // background-image: url(); //=> Image set inline on HTML element
} 

I've about 5-6 links, each one animate (on hover) its relative div.

[ZachSaucier]

@Black Ducas Please make a minimal demo of the issue.

[Pajah]

@Jonathan

For some reason even your CodePen example with rotation: 0.01 gives me a non-smooth animation on Firefox.

Moreover, if I switch browser tabs or hide/show your inline CodePen example by clicking the "Results" button, it gets even worse.

Probably the rendering algorithms in Firefox have been updated since 2015.

I understand this is a Firefox issue unrelated to GSAP, however, maybe there are some tips on fixing this behavior.

Thank you!

[GreenSock]

A few things you can try: 

1. Set will-change: transform in your CSS on the element that's animating
2. Increase the rotation slightly. 
3. Set force3D: false

[leet-ice]

I've tried all mentioned ideas... what ended up working was increasing the rotation.. if the animation is changing x,y,opacity,scale too slowly (ie too few pixels per second), rotation: 0.01 isn't enough.

 

I instead just set the rotation with CSS to .01deg, and it's completely smooth now for all animations.

transform: rotate3d(1, 1, 1, .01deg);