Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
LeoZ

Rotate the card and increase circle radius while dragging the card

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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

Link to post
Share on other sites

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

Link to post
Share on other sites

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.

Link to post
Share on other sites

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!

 

  • Like 2
  • Thanks 1
Link to post
Share on other sites

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!

  • Like 2
Link to post
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    No registered users viewing this page.

×