Animation slow/jerky (not smooth) in firefox

[jasmeetsehgal 0 Likes (Newbie)]

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 5,176 Likes (Superhero)]

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 0 Likes (Newbie)]

Thanks Jonathan

[dada78 31 Likes (Newbie)]

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 5,176 Likes (Superhero)]

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 0 Likes (Newbie)]

This fix doesn't work for me ...

 

 

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

 

Any help???? 

[Jonathan 5,176 Likes (Superhero)]

@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!