Jump to content
GreenSock

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

Animation stuttering in IE, Edge, Firefox

Recommended Posts

Hi Greensockers

I have an issue with some animations (scale and X) in certain browsers.
They all run very smooth in Chrome, but in other browsers like Edge and Firefox not smooth at all, they stutter. 

I'm using translations so these should always run smooth right?

See the Pen bgKPBo by peterprutser (@peterprutser) on CodePen

 

Firefox has issues with the X translation , Edge has problems with both scale and X

any suggestions?
Many thanks

Link to post
Share on other sites

I am fighting with these issues since a year and I have to tell that at this point: I don't care if my animations are jerky or stuttering or whatewer weird insane bugs they have in different browsers. I don't have more patience to patch/hack the browsers. I did it, multiple times, but the workarounds aren't working now. The last known perfect chrome version was v41. I feel that, this is not my job to make the animations perfect in every browser. It is their job to implement the standards perfectly. I am tired, i am sad, i don't care anymore...

But, You can find various posts here in this forum like: 

https://greensock.com/forums/topic/13875-chrome-49-janky-gsap/
https://greensock.com/forums/topic/13975-scale-text-animation-in-chrome-flickering-and-not-firefox/

  • Like 5
Link to post
Share on other sites

Thanks for the reply..
Seems like the browser hassle will never stop euh..

Link to post
Share on other sites

I am fighting with these issues since a year and I have to tell that at this point: I don't care if my animations are jerky or stuttering or whatewer weird insane bugs they have in different browsers. I don't have more patience to patch/hack the browsers. I did it, multiple times, but the workarounds aren't working now. The last known perfect chrome version was v41. I feel that, this is not my job to make the animations perfect in every browser. It is their job to implement the standards perfectly. I am tired, i am sad, i don't care anymore...

 

But, You can find various posts here in this forum like: 

 

https://greensock.com/forums/topic/13875-chrome-49-janky-gsap/

https://greensock.com/forums/topic/13975-scale-text-animation-in-chrome-flickering-and-not-firefox/

 

We share the pain brother!

 

I'll try to get it as smooth as possible but there's only so far that I would go. After a while it's pointless. It's never going to be perfect.

 

While the browser wars is a good thing for innovation, it also generates a lot of differences as they all try to do their own thing and stand above the others. Otherwise, why would there be several browsers if they all did the exactly same thing/behaved in the exactly same manner.

  • Like 4
Link to post
Share on other sites

Hello AntalNagy, and Welcome to the GreenSock Forum!

 

I forked your codepen and made some additions:

 

See the Pen zNmeKq by jonathan (@jonathan) on CodePen

 

You just want to add a slight rotation:0.01 to your tweens that use scale and that use x, y, or z to work around this sub-pixel snapping bug in Firefox, MS Edge and IE.

 

Also instead of using opacity use autoAlpha for a slight performance goodness.

 

autoAlpha is part of the CSSPlugin:

 

https://greensock.com/docs/#/HTML5/GSAP/Plugins/CSSPlugin/

  • autoAlpha
    Identical to opacity except that when the value hits 0 the visibility property will be set to "hidden" in order to improve browser rendering performance and prevent clicks/interactivity on the target. When the value is anything other than 0, visibility will be set to "inherit". It is not set to "visible" in order to honor inheritance (imagine the parent element is hidden - setting the child to visible explicitly would cause it to appear when that's probably not what was intended). And for convenience, if the element's visibility is initially set to "hidden" and opacity is 1, it will assume opacity should also start at 0. This makes it simple to start things out on your page as invisible (set your css visibility:hidden) and then fade them in whenever you want.
    //fade out and set visibility:hidden
    TweenLite.to(element, 2, {autoAlpha:0});
    
    //in 2 seconds, fade back in with visibility:visible
    TweenLite.to(element, 2, {autoAlpha:1, delay:2});
    

I hope this helps! :)

  • Like 2
Link to post
Share on other sites

This is indeed a nice trick for smoothing the animation. 
However the slight rotation make the image and text go blur, so I'm not sure I will use this for text images, but at least I have some options now.

Many thanks!
 

  • Like 1
Link to post
Share on other sites

You could also add force3D:false to your tweens and that should remove the blurriness of the image.

 

force3D is part of the CSSPlugin

 

https://greensock.com/docs/#/HTML5/GSAP/Plugins/CSSPlugin/

  • force3D
    As of 1.15.0, force3D defaults to "auto" mode which means transforms are automatically optimized for speed by using matrix3d() instead of matrix(), or translate3d() instead of translate(). This typically results in the browser putting that element onto its own compositor layer, making animation updates more efficient. In "auto" mode, GSAP will automatically switch back to 2D when the tween is done (if 3D isn't necessary) to free up more GPU memory. If you'd prefer to keep it in 3D mode, you can set force3D:true. Or, to stay in 2D mode whenever possible, set force3D:false. See http://css-tricks.com/myth-busting-css-animations-vs-javascript/ for more details about performance.

OR instead of using force3D: false you could instead add the following CSS properties to your CSS for the elements being scaled

.element-with-transform {
   -webkit-backface-visibility:hidden;
   backface-visibility:hidden;
   -webkit-transform-style: preserve-3d;
   transform-style: preserve-3d;
}

And add this to the parent of the element being scaled

.parent-of-element-with-transform {
      -webkit-perspective: 1000px;
      perspective: 1000px;
}

:)

  • Like 3
Link to post
Share on other sites

I wish for a module which is automatically patching all the crappy browser animation behaviours. It would handle all browsers and versions, with all the animation types ( slide, scale, rotation ) and HTML element types ( div, img, path... ). Would be nice if it could be the part of GSAP.

  • Like 2
Link to post
Share on other sites

That would be nice Oliver16Years, but if you were dealing with Chrome for example, they change out bugs every update version. So you never know if a bug fix still works until its to late or until you have time to test the new version and see if the Chrome devs fixed a bug but created a new one. Plus it depends if your doing a 3d transform vs a 2D transform.

 

But as rule i always add those properties when doing any type of 3D transform, since those properties are pretty much required due to the CSS transform spec. Especially for CSS 3D transforms which require properties like backface-visibility, transform-style preserve-3d, and perspective or transform: perspective() in order to render the element correctly. Most browsers need those properties present so it can know how to properly render the element with 3d transforms :)

  • Like 3
Link to post
Share on other sites

You could also add force3D:false to your tweens and that should remove the blurriness of the image.

 

Great tip!

 

However, I noticed when I include force3d:false to keep things crisp, the stutter comes back in MS Edge. Either keeping it out or set to 'true', the animation plays smoothly. (Referencing a similar project I'm doing.)

 

Have you experienced this?

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.

×