Animating Height Seems Very Choppy in Safari

[celli]

I minimized the content in my codePen as much as possible to try and isolate the problem wfor my question--but there might still be a lot of content there. I am concentrating on clicking one of the thumbnails In my codePen, and when I do the ".workReveal" div is animating it's height according to the height of each of the images.

 

In Chrome the animation is buttery smooth, but in Safari on a new fast computer, it is terribly slow. You can see it when the thumbnail boxes move down the page and when you click the "X" to move the thumbnail boxes back up the page, the animation is very choppy and super slow--there must be something that I am doing wrong! I have removed and isolated every tween I could think of, but I still can't seem to find the reason why this is happening...and hoping someone can see where my problem is.

See the Pen rLWGRg by celli (@celli) on CodePen

[Jonathan]

Hello celli,

 

In your tweens, wherever you are animating width or height, add  autoRound: false so it can allow the height to be animated on a sub-pixel level. 

 

The autoRound property is part of the GSAP CSSPlugin:

 

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

• autoRound
  By default, CSSPlugin will round pixel values and zIndex to the closest integer during the tween (the inbetween values) because it improves browser performance, but if you'd rather disable that behavior, pass autoRound:false in the css object. You can still use the RoundPropsPlugin to manually define properties that you want rounded.
  
  If you need to animate numeric attributes (rather than css-related properties), you can use the AttrPlugin. And to replace the text in a DOM element, use the TextPlugin.

Also be careful about mixing jQuery css() method with GSAP since you will changing CSS properties outside of GSAP.

 

So instead of doing stuff with jQuery css() .. you should use the GSAP set() method.

 

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

 

This way GSAP is always in control and can keep track of what CSS properties your changing!

 

[celli]

Hi Jonathan,

 

That is perfect! autoRound: false is exactly the trick !! ...and the tip about using the GSAP set() method is also an awesome addition.

 

Thank You !!

[Jonathan]

No worries, Happy Tweening celli