Bad performance in Chrome

[Marshmallow]

Hi there!

 

I have been using GSAP for 4 days now and I have been trying to create a fullscreen slideshow of projects for a portfolio. So far I have all the animations and timing however in Chrome the transitions are really slow, sluggish and I get baout 10fps once it transitions. 

In IE however it runs flawlesly with little to no framedrops.

 

I have already tried to add z: 0.01 to the animations and a few other tricks (as you might see in my codepen) but nothing seems to work. Could anyone tell/explain to me why this happens.

 

How to control the slideshow:

Swipe, Scroll, press up/down or use the black boxes to go up/down or back to the first slide.

 

Thanks in advance.

 

~ Marshmallow

See the Pen jVQarX by lavandongen (@lavandongen) on CodePen

Edited December 15, 2016 by Marshmallow

[Jonathan]

Hello Marshmallow and Welcome to the GreenSock Forum!

 

When i inspect your code the only thing i see choppy is the background image position your animating with jQuery css().

 

jQuery is really bad at animating stuff. I would suggest that you dont use jQuery css() and use GSAP set() instead.

 

It looks like you are triggering animating it via the resize event that has jQuery css() to animate background-position-y. But that resize event will fire sporadically. You would need to also add a throttle or debounce type of resize event so it fires consistently and not when i resize is not needed.

 

Also i notice you are setting css properties like opacity transforms via jQuery css() instead of using GSAP to set your css properties using GSAP set()

 

GSAP TweenMax set() : https://greensock.com/docs/#/HTML5/GSAP/TweenMax/set/

 

GSAP TimelineMax set() : https://greensock.com/docs/#/HTML5/GSAP/TimelineMax/set/

 

Also take a look at the GSAP CSSPlugin Docs, it will help you better understand GSAP and CSS

 

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

 

GSAP TweenMax Docs: http://greensock.com/docs/#/HTML5/GSAP/TweenMax/

 

This way GSAP knows what you are setting, otherwise when you use jQuery css() GSAP has no way of keeping track of what you change outside it. You know what i mean.

 

For example another thing you can do in your tweens you can use autoAlpha instead of opacity for better performance:

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

 

Once you get used to the GSAP API ..  things will become much easier.

[Marshmallow]

Thanks Jonathan! 

 

I'll have a look at it

[Marshmallow]

Hello Marshmallow and Welcome to the GreenSock Forum!

 

When i inspect your code the only thing i see choppy is the background image position your animating with jQuery css().

 

jQuery is really bad at animating stuff. I would suggest that you dont use jQuery css() and use GSAP set() instead.

 

It looks like you are triggering animating it via the resize event that has jQuery css() to animate background-position-y. But that resize event will fire sporadically. You would need to also add a throttle or debounce type of resize event so it fires consistently and not when i resize is not needed.

 

Also i notice you are setting css properties like opacity transforms via jQuery css() instead of using GSAP to set your css properties using GSAP set()

 

GSAP TweenMax set() : https://greensock.com/docs/#/HTML5/GSAP/TweenMax/set/

 

GSAP TimelineMax set() : https://greensock.com/docs/#/HTML5/GSAP/TimelineMax/set/

 

Also take a look at the GSAP CSSPlugin Docs, it will help you better understand GSAP and CSS

 

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

 

GSAP TweenMax Docs: http://greensock.com/docs/#/HTML5/GSAP/TweenMax/

 

This way GSAP knows what you are setting, otherwise when you use jQuery css() GSAP has no way of keeping track of what you change outside it. You know what i mean.

 

For example another thing you can do in your tweens you can use autoAlpha instead of opacity for better performance:

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

 

Once you get used to the GSAP API ..  things will become much easier.

 

Hi I've gone through the changes you've suggested. Though to no prevail. On Chrome it is still as choppy and with a low FPS

 

As for the resize() trigger, that is only there to change the background-size and has nothing to do with the rest of the page. And since that ain't animated I am just changing it with css() (besides I tried it with set() just now but it didn't work so well)

[Jonathan]

If you make a change you should fork your previous example make the changes and save it and post it back here.

 

What OS and OS version?

What browser and browser version?

 

This also looks like a render bug that Chrome has that affects background-image elements animated in Chrome.

 

If you go to this topic you can see the progression of this bug that started in Chrome 49 and reappeared in Chrome 53.

 

http://greensock.com...-49-janky-gsap/

 

Various solution to fix this bug:

 

This applies to the parent of the element with the bg image:

 

http://greensock.com...ge-4#entry65415

 

This applies to the element itself with the bg image:

 

http://greensock.com...ge-4#entry65658

 

And the Google Chrome bug report page of this ongoing bug:

 

https://bugs.chromiu...&groupby=&sort=

 

You can also add autoRound:false for the tweens animating background-position.

 

You can also try and set force3D:false on your tweens and see if that helps since this is a Chrome render bug.

[Marshmallow]

I have worked out how to get it smooth in all browsers.

 

I have removed the background image and replaced it with an image that is 150% of the width/height and applied overlfow hidden to it's parent.

therefrom I just moved it with GSAP as I would any div and that works perfectly

 

The working example can be found here: 

See the Pen woRKGm by lavandongen (@lavandongen) on CodePen

 

Though addmitedly this is dodging the problem of the backgroundPosition bug in Chrome and other browser