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.

[Wisse]

Hi @bro-design,

Did you found a solution? I'm running into the same problem ;)

[Cassie]

I can take another look at this demo for you, maybe I can simplify it down.

[Cassie]

Nope, there's no way I can get into how the finsweet filter works I'm afraid. That's all minified code.

You'd basically need to do something like this

 

See the Pen abegxyq?editors=0111 by GreenSock (@GreenSock) on CodePen.

 

When the user clicks on a different category, kill the batch and then create a new one.

[Wisse]

Hi @Cassie,

Thank you so much for the effort. I'll give it a try

[theraseus]

Hi @Cassie

I am running into a similar issue now using webflow native gsap animations with a CMS list filtered with finsweet.  do you think the same method of killing the batch and recreating it could work? or the fact that the objects are created using the CMS might generate conflicts? 

Thanks

[Rodrigo]

Hi @theraseus,

 

I'm not at all familiar with finsweet, but is there any API that exposes a callback or callbacks system when filtering is completed and the list is updated? That would be my first attempt to solve this.

 

The approach of killing the instances should work as expected, there shouldn't be any issues there. Another alternative to that demo is to use GSAP Context:

https://gsap.com/docs/v3/GSAP/gsap.context()

 

Here is a demo using it:

See the Pen ByLVpEW by GreenSock (@GreenSock) on CodePen.

1 hour ago, theraseus said:

or the fact that the objects are created using the CMS might generate conflicts? 

There shouldn't be an issue with that, since at the elements are in the DOM, so basically, regardless of how, these are DOM elements and therefore once they are in the DOM they can be animated with GSAP.

 

Hopefully this clear things up

Happy Tweening!

[theraseus]

thanks @Rodrigo i will look into both options and come back if any route works for future reference. Thanks!