Repositioning/Filtering Infinite GSAP Grid

[samwatts1988]

Hi there! I've been working on an infinitely scrolling image grid in GSAP for a while now and am looking to implement some filters so that, when clicked, images that aren't tagged with that specific category are removed from view and the items on the grid reposition themselves (with animated translate) to fill in the gaps which are empty following the execution of the filter action. 

 

I'm wondering what the best approach would be to achieve this effect and would appreciate any guidance/suggestions which will help to get me moving in the right direction. 

 

I've included a sample CodePen. Unfortunately there's still a reasonable amount of code here after simplifying as much as I could (I can only remove so much otherwise the demo doesn't function - many apologies for this), however the filter code is between lines 28-59. I also wondered if it might be possible to reuse the code to initially create the grid between lines 61-157, however I've as yet been unable to leverage this in any way. 

 

I'd be grateful for all hints/advice given - and many thanks in advance!

 

Thanks, 

 

Sam

 

See the Pen oNJEBOJ by samwatts1988 (@samwatts1988) on CodePen

[Rodrigo]

Hi Sam,

 

There is a lot going on in your demo and we don't have the time resources to go through all that code and see what could be the issue.

 

I'd suggest you to try the Flip Plugin that was made for stuff like this, especially check this demo:

See the Pen NWRxarv by GreenSock (@GreenSock) on CodePen

 

Hopefully this helps.

Happy Tweening!

[samwatts1988]

Hi Rodrigo, 

 

Many thanks for your response - totally understand and appreciate your advice!

 

I've been attempting to work the Flip plugin into my implementation and have managed to make some progress, however I think I might be doing something fundamentally wrong as when toggling the filters using checkboxes the elements don't currently reposition using an animation (code is implemented between lines 28-70). I've attempted to remove some additional code from the demo, however much of it is essential to the initialisation of the grid. 

 

 

I've positioned the elements using a combination of absolute positioning and translate values (so I assume it could also be something to do with this), whereas the demo you've provided is using flexbox - is it possible to use Flip with an implementation such as the one I'm using, or do you think it's advisable to amend this? 

 

Many thanks again for your help here. 

 

Best wishes, 

 

Sam

 

[Rodrigo]

Hey Sam,

 

Sorry but I'm having a few issues understanding what's going on without a complete grasp of your app. Before adding Flip to the mix, you should have your filtering functioning without any animations whatsoever. That is, it should remove/add the elements and re-order the ones you keep or the ones you had plus the ones you're adding, without removing them from the DOM for now (you can actually do that once the filters are working as expected and the Flip animations are doing what they supposed to do as well).

 

So for example, if you un-check A, then you should keep B-C-D elements visible and re-arrange everything so the grid looks the way it should. Then when checking A back those elements should be visible and the grid should be arranged accordingly.

 

In the codepen example in my previous post if you comment out lines 14-22, run it again and check the DOM with devtools, you'll see that the filtered-out elements are still in the DOM, they're just not visible. The grid is arranged accordingly. When you add elements again, you'll see everything going back to the way it was. That's what you need to have first in order to plug Flip into it later.

 

So my advice would be to forget about Flip and focus on the filtering and arranging the DOM first. When that is working I can assure you that Flip will fit like a glove.

 

Hopefully this helps.

Happy Tweening!