Trouble with combining CMS Filters and Gsap


Dealing with CMS Filters and Gsap Scrolltrigger animations is a real challenge, as the use of filters constantly changes the content of the page.

I managed to do it quite well so far, but I’m running into a very strange issue that I have been able to fix. When I click on a link, I use this piece of code to refresh the scrollTrigger:

                (e) => {
                    let [t] = e,
                        r = document.querySelector('[fs-cmsfilter-element="clear"]'),
                        i = () => {
                            m.scrollTrigger.refresh(), t.filtersActive ? ( = "block") : ( = "none");
                        t.listInstance.on("renderitems", (e) => {
                            setTimeout(() => {
                            }, 300);

But now when you click on a filter (the Services), there is a bug on the animated element (.format-icon): it goes back to its raw size…

Here’s the link: Studio Format – Projets

Do you have a clue of what could possibly fix this?

It would very much appreciated!


Hey @pablo.faust! I’ve been having a look at the issue these couple of days but I am also baffled on what is causing the issue.

Could you also record a quick Loom video and explain what is going on in more detail?

I’ll have another go at it

Thanks a lot Luis!

Here’s a loom: Loom | Free Screen & Video Recording Software | Loom

Sorry for my English!!

Hey @pablo.faust! Thanks for the video, I’ll keep trying on my end and let you know if I achieve something.