Flip with React - can't get filtered items to animate out gracefully

[moleboy]

Demo on StackBlitz

 

The above example filters an array of 7 microphone products based on different attributes. It is very much a work in progress and best viewed at desktop width (filters appear on the left).

 

I attempted to get the boxes animating by following the demo in the Advanced React Guide of boxes appearing/disappearing on click

 

 

There are just 2 components that are involved:

 

1. Collection.jsx is the component that filters the array and this array is passed to MicrophoneList.jsx as a prop.

 

2. MicrophoneList.jsx creates the MicrophoneListItem components and GSAP flip is used to animate these off/on.

 

Issues that I'm having

 

1. Initially the boxes that appear can be in random positions when the page is refreshed and sometimes you have to toggle filters on and off to put the boxes in their required location.

 

2. I can't get the onLeave to trigger. All items disappear instantly before the filtered items fade in.

 

3. I suspect that this could be due to me re-creating all child components again on re-render (and this could be more of a react question) but I'm not sure how to do things differently? It looks/works fine without any animation but I'd really like to get it working with a nice transition.

 

If anyone can enlighten me on where I'm going wrong I'd be really appreciative!

 

[Rodrigo]

Hi,

 

Sorry to hear about the problems, but your demo is far too large with a lot of files and some of them with lots of code as well. We love challenges and helping our users but unfortunately we don't have the time resources to comb through a complex codebase trying to find issues and problems, is beyond the help we can provide in these free forums.

 

I would strongly recommend you to simplify this as much as possible and completely remove GSAP from it. First get the filtering correctly without animations. Then create the workflow that actually filters everything correctly first and then removes the elements from the DOM.

 

I strongly suggest you to really study the code in this demo:

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

 

Basically the idea is to first update the filters correctly, then update the Flip State, once the Flip state is updated, update the styles (using a class or styles directly) run the animations using onEnter and onLeave callbacks and once all is done, update the DOM.

 

That's the route I'd go in this one.

 

Good luck with your project!

Happy Tweening!