Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
jasmeetsehgal

Animation slow/jerky (not smooth) in firefox

Go to solution Solved by Jonathan,

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 post
Share on other sites

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

×