Jump to content
Search Community

performance issue on android with scroll animation

amorbytes 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

Hello All,

I am developing an app on android using phone gap.

I am using timelinemax for animation.

My animation is like this : one object is animating along with scroll animation.

Animation works fine after scroll is completed. when both run simultaneously then object animation is poor.

Is there any workaround for this ?


Android Tested : 4.0 to 4.2



My second concern is that how we can achieve more smooth animation by force3D = TRUE or by Tweenmax.set(obj,{z:0.1}); ?



Any help would be appreciated.


Link to comment
Share on other sites

That's very difficult to troubleshoot blind, but yes, you could certainly try force3D:true to see if that helps things. But Android is generally kinda slow (that's unrelated to GSAP) and typically the biggest bottleneck (by FAR) in situations like this is graphics rendering in the browser, not JavaScript execution (GSAP). Make sure you don't have code running in an onscroll or something because that can get fired WAY too frequently and cause bouncing (onscroll makes a change to the DOM that affects scroll position which causes an onscroll, and on we go in a circle).


Good luck!

Link to comment
Share on other sites

Hi, I would recommend you throttling the functions executed onScroll ( see http://benalman.com/projects/jquery-throttle-debounce-plugin/ ). Some android browsers have one problem - they don't dispatch scroll events, they dispatch inly one at the end of the scroll ( similar to debouncing ), other dispatch it very poorly... I had to make a navigation that highlights on scroll and it worked great, except in mobile browsers.... So I nailed it up to two choices:


1) Start a timer at the beginning of scroll, stop it at the end of the scroll and sync your animation with the timer (when it fires) 

2) Use tweenMax Draggable+ThrowProps plugin and sync your animation with onThrowUpdate / onDrag


I went with the second option and it worked well for me. 

  • Like 2
Link to comment
Share on other sites

Hi, sorry for the mistake. I thought you're animating with timeline on scroll. I don't have android device available at the moment, but when it's possible, I'll try to find a possible solution. It would be great if you provide very simple pen demonstrating the effect. 

Link to comment
Share on other sites

First of all sorry for my mistake,

I had forgotten to mention that I am not developing web application which run in browser.
I am developing a phonegap mobile application in which your html,css and js files runs within webview. 
I have tested this in android 4.0 to 4.2.

Apart this issue, I am trying to solve it by animating x property of scroll content and it gives me smoother performance.

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