Jump to content
Search Community

please~! Animation performance test on mobile ~~~

ice-frog 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

Why do the test?
     Because like this guy(Greensock slow on mobile devices:http://greensock.com/forums/topic/7842-greensock-slow-on-mobile-devices/?hl=android#entry34635), I have a serious performance problems on mobile devices of Android,Even the ‘opacity’ animation.
     I searched the Forums,and readed all related topics, the given advice is basically set force3d and use of x, y,But this does not solve the problem。
     Accidental circumstances I try to replace my project to CSS animations, I were found it to be smoother ,the same effect on Andriod device. 
   I wonder whether my code has a problem?So I decided to find an example of the official, to do a test?[/b][/b][/b][/b]
 
The official test:

 
 
The Test devices and OS:
iphone 6 : ios 8.4
smartisan U1 :  Android 4.4.4

ASUS K00U : Android 4.2.2

 
The test environment:
iphone6 : safari、ios webview  ( in wechat )
smartisan U1 :chrome 、android webview  ( in wechat )
ASUS K00U:chrome 、android webview  ( in wechat )
 
The test result:
iphone6
-------------------------------------------
safari (quantiy:300)
css : 55~60fps
gsap : 25~30fps
 
test video:


 
-----------------------------------------------------------
ios webview  ( in wechat )quantiy:300
css : 55~60fps
gsap : 25~40fps
 
test video:

 
-----------------------------------------------------------
 
 
 
smartisan U1
-------------------------------------------
chromequantiy:300
css : 5~10fps  (Although the FPS value is very low, but the fact is looks smooth,see the video
gsap : 15~20fps (Is not so smooth
 
test video:

 
-----------------------------------------------------------
android webview  ( in wechat )quantiy:100
css : 60~65fps
gsap : 40~45fps
 
test video:

 
-----------------------------------------------------------
 
 
 
 
ASUS K00U
-------------------------------------------
chromequantiy:200
css : 7~9fps  (Although the FPS value is very low, but the fact is looks smooth,see the video
gsap : 15~25fps (Is not so smooth
 
test video:

 
-----------------------------------------------------------
android webview  ( in wechat )quantiy:100
css : 65fps
gsap : 13~25fps
 
test video:

 
-----------------------------------------------------------
 
 
The PS:
     I am a big fan of GSAP,but I have a serious performance problems on mobile devices of Android, I hope anyone who see this topic, if you have android devices, also can test, and replay to the test results。
     Of course, I more hope that the official team can test the android devices, and optimize the performance issues on android devices,thanks!

See the Pen 2a53bbbcd47df627f25ed1b74beb407d by GreenSock (@GreenSock) on CodePen

Link to comment
Share on other sites

Hello ice-frog, and welcome to the GreenSock Forum!

 

CodePen has had some server issues the past couple of months, so all javascript and code has been running really slow or non-responsive on their server!

 

So i had some additional questions:

  • Did you try and also test this in incognito mode on Mobile Chrome?
  • Was the test tested in codepen full or debug mode (debug mode wont load the code in an iframe which could affect performance)?
  • Have you tried exporting the GSAP performance test and running it locally or on a different server where results can not be skewed by codepen's server issues?
  • Do you have an example demo of your custom code that you were having performance issues on?
  • Also when these test were done, did you have other apps or processes running in the background on your phone?

Also I would highly recommend  you take a look at this article by GreenSock regarding lagSmoothing()

 

http://greensock.com/gsap-1-12-0

 

lagSmoothing() in the Docs:

 

TweenLite.lagSmoothing() : http://greensock.com/docs/#/HTML5/GSAP/TweenLite/static_lagSmoothing/

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

 

I just want to be able to help.  We appreciate all the examples given above.. they will be really helpful in addressing your concerns :)

  • Like 2
Link to comment
Share on other sites

hi,Jonathan,thank for your advices,and here is my answer to your some  additional questions:

 

1.Was the test tested in fullscreen mode in codepen?

yes

 

2.Have you tried exporting the GSAP performance test and running it locally or on a different server where results can not be skewed by codepen's server issues?

in  fact,I do my custom test demo locally first(not this official demo),I had a bad performance on Android device, And then I do this test(use the official demo)

 

3.Do you have an example demo of your custom code that you were having performance issues on?

ye,this is my project,it's run perfect on iphone6(ios 8.4),bad on Android:http://gerberustour.com/USTour/index.html

 

4.Also when these test were done, did you have other apps or processes running in the background on your phone?

there is no other apps running in the background on my test phone

 

 

about lagSmoothing(), I use it,and there seems to be no too big effect on my project,thanks~

Link to comment
Share on other sites

A few more questions:

  1. What version of GSAP are you using? 
  2. have you set CSSPlugin.defaultForce3D = true? 
  3. Have you tried experimenting with including/excluding other properties like touch-action,  -webkit-user-select, -webkit-user-drag, -webkit-tap-highlight-color, etc.? I wonder if some of those have an effect on performance in your scenario. 
  4. Have you tried using regular <img> instead of background-image? I wonder if the way Android layerizes things is somehow less efficient if you do it that way. 
  5. Did you try changing the settings on that test so that it's animating the "left" or "top" property as well? I suspect you'll see a big degradation in CSS performance. 

Ultimately I'm pretty confident this isn't a GSAP issue but rather a limitation of the browser and hardware itself when it comes to JS. It's pretty unfair the way browsers handle CSS compared to JS transforms - for JS they force you to create a long concatenated string with the 3D values rather than allowing us to set each element numerically directly. It's just plain wasteful in my opinion. 

 

Like my video at http://greensock.com/css-performance explains, CSS transforms on some mobile devices get spun off to a different thread which can allow them to appear smoother under pressure, but you typically pay a price when it comes to synchronization and flexibility. There's a huge flexibility price. But if your particular project doesn't need that flexibility and works better with CSS, go for it. There are some rare situations where it makes sense to use CSS and this may be one of them. I really doubt there's anything we could possibly do in GSAP to make it perform significantly better, but let us know if you discover anything. 

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