Problem when flipping to a new component on click [FLIP Plugin, React]

[Zeki123]

Hi all,

I am new to gsap and this library has been fantastic so far. 

 

I was looking to recreate the following effect where you click an image, and it flips to the corresponding page.

https://dribbble.com/shots/17535054-Homepage-Animation-for-Melbourne-Wooden-Showroom

 

After doing a bit of digging, I thought I could use the following demo below as a base to toggle between component states. 

 

To start, I thought it would be best to observe how the component would behave when used multiple times within another component, like a list. 

 

Here is where I'm at:

https://codesandbox.io/s/gsap-flip-react-test-t3odk8?file=/src/App.js

 

I expected there to be some problem with the states, but I'm not too sure why clicking on any of the three list items only triggers a flip from the last item in the list. 

 

It would be super helpful if someone could help me with this, or point me in any direction if this is not the ideal way to approach this. Please let me know if I can provide any additional information. Thank you in advance. 

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

[GreenSock]

I don't have a lot of time to look at this right now but I think the main problem is that you're trying to flip between two completely different elements but you didn't give them the same data-flip-id attribute. Make sure that you:

1. Do your Flip.getState() BEFORE you make any state changes
2. The data-flip-id values of the before/after elements must match
3. Do NOT have other elements also use the same data-flip-id otherwise they'll all match and Flip won't be able to figure out which one you're trying to flip to which other one. It looked to me like you've got ALL the list item components using data-flip-id="img". So when it captures the state of all of them, there is no distinction. So the last one saved overwrites all the other ones (that's likely why you saw the last one always being the one that flips). So for example, perhaps each list item has its own unique data-flip-id (one will automatically get assigned when you .getState(), so you don't really have to do it manually), and then when you're going to flip to the new/big one you'd just grab the data-flip-id of the clicked list item, assign that to the new/big one and then call your Flip.from(...) so that Flip can discern which ones match up for flipping.
4. Obviously if you're trying to make the leaving ones animate out, you must keep them around. If React re-renders and totally wipes them out, then obviously Flip can't animate them. 

I hope that gets you going in the right direction. 👍

[GreenSock]

By the way, since you're in React world, this **might** be helpful: 

https://greensock.com/docs/v3/Plugins/Flip/static.batch()

 

Also, I noticed that in your cleanup function you're calling .kill() on the animation but keep in mind that doesn't revert it. That would just kill the animation itself, leaving the element in the state it's in. You may want to look at the brand new gsap.context()  method which makes developing in React quite a bit easier. 

[Zeki123]

Hi Jack, thank you so much for your reply. 

 

English isn't my first language so sometimes it is hard to fully understand documentation, but your explanation clarified a lot of things about how Flip exactly works, I was definitely understanding it a bit wrong. All of the elements having a flip ID is definitely probably one of the causes of the bugs. I will take your suggestion and try assigning unique ID to each image instead first.

 

Thank you so much for your help!