Need help with card animation!

[LeoZ]

Hello everyone,

I have been trying to achieve the similar kind of card animation for one of my project. Please click on this link to see card animation effect: 

http://knowlupus.org/

 

The way card gets open and close in this game, I want to create exact same effect. I have also attached the codepen link. Is anyone can suggest me how can I achieve this? At least suggest me any resource or idea to achieve this.

Your help is much appreciated.

See the Pen bGErNad by LeoZoe (@LeoZoe) on CodePen.

[ZachSaucier]

Hey Leo. You can look at the transforms applied to the cards in different states in that site and animate the same transforms in your project. Unfortunately we don't have the capacity to do it for you but feel free to ask if you have any specific questions  

[LeoZ]

4 hours ago, ZachSaucier said:

Hey Leo. You can look at the transforms applied to the cards in different states in that site and animate the same transforms in your project. Unfortunately we don't have the capacity to do it for you but feel free to ask if you have any specific questions  

Hello Zach!

Thank you so much for suggestion. I have done the beginning part of animation but struggling with end animation. So if you see my codepen which is updated, when you click on the "Next' button and cards will rotate and place on the top but after clicking on the card I want to move them to the left or right side and rotate back to close. Means if you see that website when you click on the next question button, how it smoothly animate to the left side and close again. 

Could you please help me to achieve only that end part? That is the part only remain now.

[ZachSaucier]

Do you have a specific question about how to use GSAP? Unfortunately we don't have the capacity to fix every logical issue that people post in the forums.

[LeoZ]

No problem sir. Our company decided to use another libraries. Thanks.