How to smooth my animation

JavaScript
1

Hi there,

Currently working on a very simple project which shows/hides divs depending on their class name. At the moment I have probably about 30 divs being controlled by four buttons. However, when it comes to “showing all” of them at once, the animation slows down (most likely because of the data involved) and is only set to be worse on Internet Explorer and other, slower browsers I expect.

Anyway, is there a way in which I could make my animation more responsive in terms of animation time so that it becomes a much smoother transition between switching around the divs? At the moment some divs are playing catch up and just popping in. Please see the example at the address below.

http://www.andrewcourtney.co.uk/test-environment/jquerywall/jquerywall.html

Any thoughts on how I could improve the look of the animation would also be welcome :slight_smile:

Cheers,

Shoxt3r

2

Okay, so I’ve looked into applying easing into my jquery to smooth out the animation which seems to have improved it slightly but it is still very glitchy on the “show all” as the animation fails to work on some divs even though they are targetted (see the third div along at the top to see what I mean). Presumably this is happening because of the maths involved with altering 20 elements at once. Ideally I’m going to have many more than this figure eventually though.

http://www.andrewcourtney.co.uk/test-environment/jquerywall/jquerywall.html

Any thoughts on how I could improve it? Would lazy loading the elements help at all so that it can cope with altering multiple elements at once? Any other methods of creating the sorting option? I know that isotope.js uses CSS3 transforms but this isn’t ideal as it isn’t cross-browser compatible.

Cheers,

Shoxt3r