CODEWITHSUNDEEP
jqueryperformancemobile-website
Ando
Ando

Reputation: 11409

Optimize animations on website created with jquery for tablet

I have a SPA website that uses extensively jQuery. All fine - looks and behaves great on all browsers.

Now I have the request to make it tablet friendly.

Just by opening the website on a tablet the biggest issue right seems to be that all interaction - select, loading icons ,fadeIn, fadeOut are sluggish and not smooth (as they are on the pc browsers).

What could I do? I cannot afford to rewrite the website using another framework, but if I can take advantage of features offered by frameworks like jquery mobile and such I am open to suggestions.

Links to resources are appreciated.

Upvotes: 2

Views: 2388

Answers (1)

Rich Bradshaw
Rich Bradshaw

Reputation: 72975

In short, use CSS transitions where ever possible. Where it isn't, ensure your animations use requestAnimationFrame.

I wrote http://css3.bradshawenterprises.com/blog/jquery-vs-css3-transitions/ a year or so back which has a contrived demo to show the difference.

https://github.com/benbarnett/jQuery-Animate-Enhanced might be able to be simply dropped in to improve performance, though it might break your site on complex animations.

Upvotes: 4

Related Questions