How to reconcile stagger animation with Finsweet CMS Filter?

[bro-design]

Hi GSAP Community!👋

My name is Dmitrii, I'm Webflow developer and now I start to use GSAP in my projects)

In this project I use ScrollTrigger+ScrollSmoother. All works perfect but I stuck with development when tried to use GSAP + Finsweet CMS Filter.

The problem is that when I try to filter the cards — cards is filtered, but GSAP stagger animation works not correct. 

Here's a video▶️  with explanation of the problem. 

In ideal way to fixing this issue is when user click on filter button — "reset" the cards stagger animation.

How you suggest to do that? Thanks)
 

See the Pen MWdMzmb by brodesign (@brodesign) on CodePen

[Cassie]

Hi there, thanks for the video and demo!

 

You may be looking for ScrollTrigger.refresh() ?

https://gsap.com/docs/v3/Plugins/ScrollTrigger/refresh()/

If this isn't the solution, would you mind simplifying down your demo to *just* the basics. We just need to see the code that is causing the issue, please don't include your whole project and all the related JS and CSS. Just some colored <div> elements and the GSAP code is best. See if you can recreate the issue with as few dependencies as possible.

Thanks so much.