Rotate the card and increase circle radius while dragging the card

[LeoZ]

Hello I want to rotate the card and increase circle radius at the same time while dragging the card.

 http://ladybird.movie/quiz

 

I have forked my codepen and I am working further on that. So anyone free to edit this codepen and help me to achieve this.

Thanks in advance.

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

[GreenSock]

Are you saying that you want the card to angle itself based on how far the mouse is from the center (and which direction)? 

[LeoZ]

Hey,

Yes exactly I want the same if I drag card to the left or right direction, circle radius should get increase and card start rotating. If I stop dragging, it should pause the animation. When I start returning to the center it should reverse the animation means decrease circle radius and reverse card flipping too. Please can you help in this. I have actually done this but not exactly the same thing I want.

[GreenSock]

There are many approaches you could take with this. Here's what I'd personally do because it'll probably deliver maximum performance and it's relatively straightforward (once you get the concept): 

See the Pen bxYYoP?editors=0010 by GreenSock (@GreenSock) on CodePen.

 

I'm using a single timeline that basically animates things from left to right and then mapping that animations progress() value to the draggable position. So when it's in the center, progress() would be 0.5. When it's all the way to the left, progress() would be 0. All the way to the right, it'd be 1. That way, you're not constantly having to set() values or track the mouse or whatever. Nice and zippy. 

 

I gave you a "range" variable so you can control how far from the center the card can be pulled before things are fully rotated/scaled. 

 

Have fun!

 

[LeoZ]

Wow! You guys are really genius!

I really want to like you one day! Thanks for helping me out!

I also achieved the same and I will share you my working codepen with you too!