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 -->
<script>
// 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);
}
</script>
<!-- Hosted Library script file on CDN for free -->
<script src="https://cdn.finsweet.com/files/cmslibrary-v1.8.js"></script>
<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
projectsGrid.filter({
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)'
}
})
})();
</script>
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”: https://www.jesusbenavides.es/blog
It’s a nice and smooth fade-up effect.
And here is the new version with CMS Filter: https://notaria-jesus-benavides.webflow.io/blog
Simple fade-efffect with a stutter.
What am I missing here? Can I achieve the same animation as before?
