Jump to content
Search Community

Animation slow/jerky (not smooth) in firefox

jasmeetsehgal
Moderator Tag

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

jasmeetsehgal
Posted

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.

  • Solution
Posted

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
  • 1 month later...
Posted

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!

Posted

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
  • 2 months later...
Posted

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

  • 3 years later...
Posted

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?

 

 

Posted

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

Posted

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.

  • 1 year later...
Posted

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

Posted

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
  • 2 months later...
Posted

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 3

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