Gsap Flip based cards project

[Raj2100]

Hey there! I am working on this project where onclick the card and the content will expand using Flip and cover the screen and then animate the content in, Just like this codepen here. I've tried a lot but every time i fix something the animations start acting all weird. Can anyone please help me with this? Here is my stackblits project https://stackblitz.com/edit/gsap-react-basic-f48716-dbpaw5?file=src%2FApp.jsx. Currently the content is not even visible.

See the Pen RwGqewd by cmalven (@cmalven) on CodePen

[Rodrigo]

Hi @Raj2100 and welcome to the GSAP Forums!

 

I don't have time to re-create the entire demo for you, but hopefully this helps in some way:

https://stackblitz.com/edit/vitejs-vite-ngqfhc

 

The recommendation I can give you is to store the state on every click event and not just once in the lifecycle of the component like you're doing right now. Also keep in mind that you can get the state of multiple elements and animate all of them with a single Flip.from() instance.

 

Hopefully this helps.

Happy Tweening!

[Raj2100]

Actually i have created a project and made the animation but the way it flips into the screen is not quite right. I just need help with that.

 Here is my stackblits project MY PROJECT.

[Rodrigo]

Yeah, unfortunately we don't have the time resources to go through all your code (HTML/CSS/JS) and solve the issues you could have, is beyond the scope of the help we provide in these free forums.

 

I already provided a simple working demo that should be enough for getting started and accomplish what you're trying to do. We offer paid consulting services and you can post in the Jobs & Freelance forums as well, in order to get help there.

 

My best guess is that the way you're handling your elements with the class toggle could be the issue here, since there is a layout jump. I would advice you to start with something simple and small first and then move up and add more functionality to it.

 

Happy Tweening!