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

Granivorous

Which OS are you working with? – Skin

I have tested with 4 and 5 - both are the same though 5 is very slightly faster – Granivorous

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

Backgammon

Ah thats great! Didnt know about these css transistions – Granivorous

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

animate-enhance made my sliding transitions nice and smooth! – Hemistich

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

I am now in love with zepto.js – Peppery

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

Shadshadberry