Jump to content
GreenSock

PeterH

Animation not smooth in Safari

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

See the Pen DHBrg by peterhadorn (@peterhadorn) on CodePen

 

We have to use linear easing for the animation of the beer glasses. It runs more or less smooth in IE and Chrome, but it's very choppy in Safari, both on Windows and iOs. Do you have any suggestions on how we can improve this and make it smoother? Thanks a lot :)

Link to comment
Share on other sites

Hi Peter and welcome to the GreenSock forums.

 

Thanks for providing the codepen but I don't see anything animating. In fact your timeline instances point to DOM elements that are empty:

<div id="begruessung">
</div>  

<div id="bierlinksWrap">
  <div id="bierlinks">
  </div>
</div>                         

<div id="bierrechtsWrap">
  <div id="bierrechts">
    <div id="prost"></div>
  </div>
</div>

And there's also no DOM element with this classes you're pointing to neither:

  .to(".clink", 1, {css:{opacity:"0.0"}}, "bra")
  .set(".clink", {css:{display:"none"}}, "bra+=.3")
  .to(".clink2", 7, {css:{opacity:"1.0"}}, "bra+=.3");

Please take a good look to your code.

 

Regarding the smooth issue this could be due to the fact that you're animating transparent PNGs with shadows, normally this causes a lot of issues in terms of rendering time for webkit browsers. You could try optimizing the files, you can use this free service that usually doesn't generates substantial quality loss:

 

https://tinypng.com/

 

Another choice would be use force3D:true on your instances, with this you pass the specific element being tweened to the GPU, therefore taking some of the load from the browser.

// in a timeline
var tl = new TimelineLite();

tl.to(element, time, {vars, force3D:true});

// on an individual tween
TweenLite.to(element, time, {vars, force3D:true});

Rodrigo.

Link to comment
Share on other sites

You're animating "top" and "left" properties which can affect document flow, meaning every time they change, they force a style recalculation and the browser has to figure out how it affects any other elements on the page. It's typically much more efficient to animate transforms (in this case, "x" and "y") instead. Once I changed that in your codepen, it was much smoother in Safari. And like Rodrigo said, it's wise to set force3D:true on the big elements you're animating so that they get their own layer on the GPU/compositor. You might want to read my article here: http://css-tricks.com/myth-busting-css-animations-vs-javascript/

 

Happy tweening!

Link to comment
Share on other sites

Thanks a lot for your quick reply and warm welcome, Rodrigo!

 

I have removed the lines referring to "clink" and added force3D:true to the beer glasses. The latter helps a lot, it looks much smoother in Safari now!

 

You can see the animation well in full screen mode: 

See the Pen DHBrg by peterhadorn (@peterhadorn) on CodePen

. I will try optimizing the PNGs next.

Link to comment
Share on other sites

Thanks a lot Jack, will switch to animating transforms too!

Link to comment
Share on other sites

Thanks again guys, both tips helped a lot. It's funny, Safari is now even smoother than Firefox. GSAP rocks!

  • Like 2
Link to comment
Share on other sites

  • 11 months later...

Hi all,

 

Can someone share an example of using y transform as opposed to changing the top value?

 

Thanks!

Link to comment
Share on other sites

Hi andgs123,

 

Welcome to the GreenSock forums.

 

Animating x and y transforms is very simple with GSAP (no vendor prefixes or any transform:translateY() stuff)

TweenLite.to(element, 1, {y:200});

demo: http://codepen.io/GreenSock/pen/PwRJVO?editors=101

 

 

Also, please watch the Getting Started video here: http://greensock.com/get-started-jsit explains a bit of how to use basic transform values

 

Happy Tweening

  • Like 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.
×