Jump to content
Search Community

Animation slow/jerky (not smooth) in firefox

jasmeetsehgal test
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

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

  • 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 3
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.
×
×
  • Create New...