Trouble with combining CMS Filters and Gsap

Attributes
1

Hi,

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:

window.fsAttributes.push([
                "cmsfilter",
                (e) => {
                    let [t] = e,
                        r = document.querySelector('[fs-cmsfilter-element="clear"]'),
                        i = () => {
                            m.scrollTrigger.refresh(), t.filtersActive ? (r.style.display = "block") : (r.style.display = "none");
                        };
                    i(),
                        t.listInstance.on("renderitems", (e) => {
                            setTimeout(() => {
                                i();
                            }, 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!

2

Anyone?

3

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

4

Thanks a lot Luis!

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

Sorry for my English!!

5

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