Question

I use several animations on my site. For example: moving some div’s like here: http://jsfiddle.net/orig/42pZZ/2/

This animation goes very smooth and there are no hickups. But when I put this code into a larger js file (with multiple other animations that can start at the same time, incl some css3 animations), this example animation isn’t that fluid anymore.

Is there a way to optimise this? Or is it better to stay at 1 animation type? e.g. only css3 (if so, how to convert the fiddle example to css3 animation?)

Kind regards,
Maurice

Answer 1

Improving the speed of your code can include multiple tasks:

• minifying your js code http://jscompress.com/
• minifiyng your css code http://www.lotterypost.com/css-compress.aspx
• smushing your pictures http://www.smushit.com/ysmush.it/ (deletes all unnecesseary bytes in your images)
• If there are many images on your website try to use sprite images

Those tasks helped me a little bit. But rendering multiple transformations and animations at the same time always slows down the page.