Jump to content


Best Performance - Safari vs Chrome vs Safari Mobile

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 Team,


I'm building some banners, using transparent PNGs, and mostly position based tweens, with some alpha and scaling.



TweenLite.to(mc, 1.5, {left:"26px", top:"30px", scale:1, rotation:-4, delay:5, ease:Power3.easeInOut});


I am using different eases, but mostly Power3.easeOut, and noticed that on Safari desktop it runs smooth as, but on Chrome it can be a little 'jerky' for lack of a better word.


I'm wondering if this is the ease type, or the fact it is a png?


I'm trying some other ease types now, but can anyone tell me what are the best performing (lowest cost) ease types for cross browser playability with pngs? It also has to play on mobile.



Link to comment
Share on other sites

I'm testing force3D:true now, seems to be helping.


If I'm using TweenLite with TimelineLite, do I need to define force3D:true for every TweenLite of an element? Or just the first?  i.e.


var tl = new TimelineLite();


.to(elem, 1, {left:"52px", ease:Power3.easeOut, force3D:true},"frame1")

.to(elem, 1, {left:"32px", top:"10px", scale:0.75, rotation:15, ease:Power3.easeOut},"frame2")
.to(elem, 1, {left:"15px", top:"84px", scale:0.8, rotation:17, ease:Power3.easeIn},"frame2+=1")
.to(elem, 1, {left:"-102px", ease:Power3.easeIn},"frame4")

Unfortunately I can't put a code pen up as the images / banner is still a WIP.

Link to comment
Share on other sites

You only need to set force3D once on an element and it will be set for all future tweens.

Also you may find that animating x / y is much smoother than top / left

  • Like 1
Link to comment
Share on other sites

Thanks Carl,


That's a good tip with x/y. I've been using top/left but will change everything now to x/y.


At what number of elements / tweens does force3D start having a negative effect? > 10 or more like > 100?

And does it matter if it is tweening transparent pngs, rather than vector elements? Or it doesn't care.


And for pure performance, in your opinion would it be better to have a TimeLineLite with 10 sequenced TweenLites inside, all using time offsets and frame label offsets. Versus 10 separate TweenLites simply using delays to stagger the animation.


I had originally used TimeLineLite, but had to remove the class for file size reasons, so switched to TweenLites with delays, but now I can have TimeLineLight back I'm curious if there is some benefit with one over the other, just regarding playback. I don't need any of the advanced TimeLine features, like time scaling or reverse / pause etc. It's simply playing through 15secs of animation and looping, about 10 elements in sequence.


I guess in a nutshell my question is, assuming both TimeLineLite and TweenLight use the same 'tick' engine,  is there slightly more overhead with TimeLineLite for playback? Which 'should' be smoother?

Link to comment
Share on other sites

With performance-related questions it is really difficult to give a sound answer especially when there are so many variables.

Even regarding just Safari mobile  it is difficult as there could be a large performance gap between safari running on iOS6 on an iPhone 4S and iOS8 on an iPhone6.

FWIW I have an iPhone 4S on iOS6 and I rarely have any noticeable issues with any of the demos we put out.


To answer in very general terms, I would not worry about force3D having any negative impacts in a banner where only a few elements will be animating at the same time. 


Although technically TimelineLite may require slightly more memory / processing overhead I sincerely doubt that you would ever notice a performance difference between 100 tweens in a TimelineLite or 100 loose TweenLites. If you can afford the filesize of TimelineLite, you should use it with absolute joy and no worries whatsoever. 

Link to comment
Share on other sites

Thanks Carl,


That's great.


I know what you are saying, it's impossible to judge or predict performance with so many variables. Especially without a code pen example.

But It's good to know I'm not missing any major best practice techniques for this kind of thing.


I'm going to stick to TimeLineLite, coz it's the bomb. I managed to find the file size.

And I'm switching from top / left to x / y, and adding force3D to all my Tweens.  


That in theory should provide the most bang for my buck on all browsers.

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.