Isotope animation

Anonymous

#219403

Hi there,

I’m trying to see if there is any way to apply Isotope animations to an existing S&F form. I’ve looked through the forum and found various instances of people trying to use Isotope to implement a masonry layout, but I don’t want anything like that. My search form has its results in a grid with equal size items and I want it to stay that way.

Anything I’ve tried so far has only broken the layout without adding animations. Besides, once applying a filter, the layout gets back to my original css grid styling.

This is my first time trying to work with isotope, so I’m a complete noob.

Any chance your could help me get the basics right?

Thanks.

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.

[Author]

Posts