Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
amorbytes

performance issue on android with scroll animation

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 post
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 post
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 post
Share on other sites

@bassta ,

 

I am not animating any object with scroll.

 

I have two animation 

 

1) scroll animation which animate and scroll a div1

2) object animation which animate x,y of a div2

Link to post
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 post
Share on other sites

if you have a an example link I can test on some of my android devices, and see if I am seeing this behavior..

 

are you testing this on an actual android device?

 

what mobile browsers are you testing on android?

 

ill be glad to help test for you..

  • Like 1
Link to post
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 post
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.

×