Animation on CMS Filter

Hi there!

I’m still using an old legacy code on my site for the filters:

<!-- Add-on script that allows you to use a Dynamic List as filter buttons -->
// Get values for each element with .filter-by-text class within the button and store in a variable
var filterByTextElements = document.getElementsByClassName("filter-by-text");

// For each filter by text element
for (element of filterByTextElements) {
    // Get each element text and store in a variable
			var elementText = element.innerText;
    // set attribute to the parent element dynamically
    element.parentElement.setAttribute('filter-by', elementText);

<!-- Hosted Library script file on CDN for free -->
<script src=""></script>
(function() {
	// create a new Library instance and store it in a variable called "projectsGrid"
	var projectsGrid = new FsLibrary('.blog-grid-archive')
	// define our filter group(s)
	var myFilters = [
		filterWrapper: ".filters-wrapper",
		filterType: "exclusive",
    	filterByClass: ".hidden-categories"  // class of the text that holds the filter info (optional)
 // run filter on our instance
	filterArray: myFilters, // the filter group name we defined
    activeClass: 'fltr-active', // the active class we give to our buttons
		animation: {
			enable: true,
			duration: 200,
			easing: 'ease-out',
			effects: 'fade translate(0px,20px)'

I’ve just switched to the Finsweet Attributes and although it works, the animation is gone.

Here you can see the old legacy animation when clicking on one of the filters like “Familia”:

It’s a nice and smooth fade-up effect.

And here is the new version with CMS Filter:

Simple fade-efffect with a stutter.

What am I missing here? Can I achieve the same animation as before?

Hey! We do have this option, which you can define as ease-out to match your legacy code settings.

The flicker could be related to your other post, this normally happen when scripts are duplicated so please ensure you are not loading the scripts twice :slight_smile:

1 Like

Awesome, thank you!

1 Like