Rotating Cards based on click

[rusticblonde]

Hi there,

 

I am trying to do a rotating and perspective card on click. The cards are rotating, however as you can see from the demo, when the card is higher than the 1st one, the first one disappears. 

 

I can see its obviously due to the perspective being set at -40px 40px on the function, however anyone have any ideas how i can resolve this to make sure that card 1 is included?

Thankyou in advance!

See the Pen dyajmmK by rusticblonde (@rusticblonde) on CodePen.

[mvaneijgen]

Another user asked something similar a while back. I can't find the topic, but I have the final demo. Hope it helps and happy tweening! 

 

See the Pen Yzdzxem by GreenSock (@GreenSock) on CodePen.

 

Found the topic 

 

 

[rusticblonde]

54 minutes ago, mvaneijgen said:

Another user asked something similar a while back. I can't find the topic, but I have the final demo. Hope it helps and happy tweening! 

 

 

 

 

Found the topic 

 

 

Hi @mvaneijgen, thankyou for this. Not sure if this totally is what I needed. Basically I was moving it on the button click. So IE, if i clicked 2, 2 would show. But then 1 would need to go back to a relevant place or gap which has been left? (in my demo :D)

[rusticblonde]

Should have made it clearer @mvaneijgen, the numbers at the top (1 - 5), if you click them, the cards change

[Rodrigo]

Hi,

 

I don't have a lot of time to dig into this, but is not the simplest thing to achieve.

 

The demo Mitchel is pointing to uses the Flip plugin to move one card at a time. In order to move maybe more than one card based on the button/card being clicked, you'll need all the logic to do that with the Flip plugin.

 

Another option could be to create a timeline (it won't be the same effect though) that animates all the cards once and adding labels to it you could resemble the effect.

 

Again this is not the simplest thing to achieve (I can't think of a super simple solution right of the top of my mind) and we don't have the time resources to create complex solutions or solve complicated logic issues for our users in these free forums. You can contact us regarding our consulting services or post in the Jobs & Freelance forums. There is always the possibility that another user can chime in with a solution or a solid starting point but is important to manage expectations.

 

Happy Tweening!