Isotope animation

Ross Moderator

#224451

Hi Thomas

Thanks for your enquiry, I’m going to break down my reply into two parts:

1) The animation here – cannot be done

The way this works is, isotope already knows all of the results / elements in advance.

When you use S&F, you only know the first (for example) 10 results, so you cannot animate the options in and out like this. Your developer is correct in that the existing results get removed, and the new ones loaded in, via a seperate request.

You’ll notice the isotope site doesn’t have an example of the animations, with filters, and an ajax request.

However, they do have a load more example, something which you might be able to implement if you have load more functionality in your search results:
https://isotope.metafizzy.co/v1/demos/infinite-scroll.html

2) You are still able to use animations – just not the type you linked to (because all the results are preloaded). You can use the the events Trevor linked to stop / start animations when new results are being fetched, or when new results are loaded in.

My logic would be:

a) on the sf:ajaxstart start event (when new results are being requested), do any animation you wish to show the items dissapearing
b) on the sf:ajaxfinish event – the results have been loaded, so you could set their state to invisible using JS, and then proceed to do whatever animation you like to have them appear on screen.

You can use CSS animations, triggered by jquery (ie, by adding / removing a class that has animation properties) – https://stackoverflow.com/questions/9850856/activate-css-animation-by-jquery

I hope that helps!

Thanks

[Author]

Posts