PhoneGap/Cordova: JQuery animations running slow

Question

I have built a an app in PhoneGap/Cordova and used the JQuery library for some simple animations like slideUp etc.

They work fine on the simulator but when I try on an actual device the animations run really chunky and slow.

Is there a way to speed this up? Or should I be using a different transitions frame work?

If the latter is true can anyone suggest a good version for me to try?

Thanks

Solution 1

jQuery animations are done using a setInterval on the css properties being animated and it is not hardware accelerated on mobile devices.

CSS Transitions are hardware accelerated on most modern devices and are therefore a better choice. There are drop in libraries that can make sure your jQuery animations are done using CSS transitions instead of costly setInterval animations.

http://playground.benbarnett.net/jquery-animate-enhanced/

http://ricostacruz.com/jquery.transit/

Give these a try.

If you are not using any of the functionality that is missing from Zepto.js, consider using it instead as it is much smaller and lighter than jQuery and made specifically for mobile devices.

Solution 2

You can speed up the process by reducing the content of your page, but this is probably not what you're asking for. A good solution might be using css transitions. This way, old browsers don't show an animation while it should work smoothly on new devices. Degrades gracefully.

Comments

[MeltingDog]

Ah thats great! Didnt know about these css transistions

[Brad]

These dont seem to have any effect on my application compared to regular jquery. Any reason for that?

[Scrat]

animate-enhance made my sliding transitions nice and smooth!

[Borza Adrian]

Thank you for the tip verry usefull!

[Falk]

For me jquery.transit does make my life better. Still sometimes I have the effect, that the animation to left or right of en element, goes too far on the mobile devices. Not always but sometimes. but its not that often anymore as before. Thanks for this.

[Talk nerdy to me]

I am now in love with zepto.js