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

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.

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.