Jump to content
GreenSock

jasmeetsehgal

Animation slow/jerky (not smooth) in firefox

Go to solution Solved by Jonathan,

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

 

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

Link to comment
Share on other sites

  • Solution

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

 

:)

  • Like 6
Link to comment
Share on other sites

  • 1 month later...

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!

Link to comment
Share on other sites

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

 

;)

  • Like 3
Link to comment
Share on other sites

  • 2 months later...

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

Link to comment
Share on other sites

  • 3 years later...

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?

 

 

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

  • 1 year later...

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

Link to comment
Share on other sites

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
  • Thanks 1
Link to comment
Share on other sites

  • 2 months later...

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);

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