Jump to content
Search Community

Animation not smooth in Safari

PeterH test
Moderator Tag

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

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 id="bierlinksWrap">
  <div id="bierlinks">

<div id="bierrechtsWrap">
  <div id="bierrechts">
    <div id="prost"></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:




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


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

  • 11 months later...

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.
  • Create New...