Draggable | Throwprops - How do I go about increasing performance on android?

[styke]

Hi all! 

 

I'm starting to optimize a site I'm building - I've run into some serious performance issues in regards to Android's stock browser when using Draggable and the throwprops plugin. Every where else it works relatively perfect. 

 

 

 

I initialize draggable for this page on line 336 of main.js, it's a pretty big function as I initialize all the code to identify when the slide changes section and code to animate the top little menu type thing. 

 

If you swipe around you'll notice the elements inside #profile-bottom .inner toggle visibility:hidden if they're off screen. It's unfortunate but this doesn't increase performance by as much as I'd hoped.

 

For some strange reason the slide container has to have overflow set to auto, otherwise the layout fucks up. Not sure if this makes a difference, but there you go. 

 

Please, recommend me how I can get the animation smoother on android. It's really choppy at the moment! 

Thanks! Good night

[Rodrigo]

Hi,

 

Normally android devices' hardware is not powerful enough to do certain stuff. On top of that I've found that android native browser is also not quite good, even if it's webkit based. So on mobile sites I always recommend use chrome.

 

What you could try is set force3D to the elements in the animation, like this:

//you could create the elements array as global
var contentItems = [$('#profile-girl'),$('#freebies'),$('#games'),$('#videos')];

//then you set all the elements to be passed to the GPU
//using force3D
TweenLite.set(contentItems, {force3D:true});

Give that a shot and let us know how it works.

 

Rodrigo.

[GreenSock]

Yeah, Rodrigo is right - many android devices (especially older ones) just don't have the horsepower for some animations and that has nothing to do with GSAP or Draggable - it's just a limitation of the hardware/browser. 

 

That being said, I've seen VERY good performance of Draggable on many Android devices and it is definitely optimized for speed in many ways. I wonder if maybe you've got some other things going on that may be causing the performance issues, like requiring a lot of graphics rendering in a large portion of the screen or editing properties that affect document flow, etc. I don't have time to offer general performance analysis and consulting on your particular project (that's usually pretty involved and time-consuming), but let us know if you figure out what's going on. 

 

Oh, and by the way, Draggable automatically enables the "force3D" option for the elements it controls, so you shouldn't need to do that manually. You can turn it off, of course, by setting force3D:false, but I wouldn't recommend that in most cases. 

[styke]

Thanks for all your advice guys. 

I wasn't able to optimize Draggable and Throwprops this time, however I found that for my requirements (smoothly scroll a container horizontally, manipulate DOM based on container's X position) it was easy enough to do using a combination of stock android browser scrolling, setInterval and jQuery Mobile's scrollstart and scrollstop events. The caveat is that iOS safari doesn't work so well with these events so I had to check which OS the user is on before initializing the appropriate code (thankfully Draggabe and throwprops go with iOS like bread and butter).