Zeki123
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Posts posted by 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
Problem when flipping to a new component on click [FLIP Plugin, React]
in GSAP
Posted
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!