Isotope animation

Trevor

#219416

Are you able to send me a live link/URL to your search page so I can take a look?

What animations are you trying to add, as it is normally used to remove space in columns resulting from unequal height sized posts?

How was your grid made (coded by you, plugin, theme template)?

Anonymous

#219423

This reply has been marked as private.

Trevor

#219457

The only work we have done looking directly at Masonry/Isotope is contained here in this thread:

https://support.searchandfilter.com/forums/topic/reload-masonry-grid-after-ajax-call/

Otherwise we have looked mainly at how other themes have implemented it.

(any private posts in that thread are not relevant to this question)

Anonymous

#219497

OK that’s mostly masonry related. Are you aware of any other method to generate animations on filter sorting with your plugin? Maybe jQuery animate()?

Trevor

#219503

We do have a jQuery action you can use to trigger anything JavaScript after or as our filter happens?

(function ( $ ) {
	
	"use strict";
	
	//detects the start of an ajax request being made
	$(document).on("sf:ajaxstart", ".searchandfilter", function(){
	  console.log("ajax start");
	  //start your animation, if you need to at this point, otherwise don't use this start trigger
	});

	//detects when the ajax request has finished and the content has been updated
	// - add scripts that apply to your results here
	$(document).on("sf:ajaxfinish", ".searchandfilter", function(){
		console.log("ajax complete");
		//do or stop your animation
	});

	
}(jQuery));

Anonymous

#221621

Hi Trevor,

Just getting back to this now. So I can use this to trigger css animation on entrance?

Thanks for clarifying

Trevor

#221672

Yes, you can.

Anonymous

#224437

Hi Trevor,

So I couldn’t get this to work and asked a more experienced developer to work on it, but he tells me that this function can’t be used to trigger css animations as the html gets replaced, and that using JS would require overriding the plugin and use JS to filter the data instead of Ajax.

I would really be interested in having your or Ross’ opinion on this.

Thanks,

Trevor

#224442

This reply has been marked as private.

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