Raj2100 Posted Tuesday at 06:21 AM Share Posted Tuesday at 06:21 AM 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 Link to comment Share on other sites More sharing options...
Rodrigo Posted Tuesday at 04:36 PM Share Posted Tuesday at 04:36 PM 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! Link to comment Share on other sites More sharing options...
Raj2100 Posted Tuesday at 07:46 PM Author Share Posted Tuesday at 07:46 PM 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. Link to comment Share on other sites More sharing options...
Rodrigo Posted Tuesday at 10:37 PM Share Posted Tuesday at 10:37 PM 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! Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now