Jump to content


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

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 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 :)

Link to comment
Share on other sites



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.



  • Like 1
Link to comment
Share on other sites

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. 

Link to comment
Share on other sites

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

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.