Jump to content
Search Community

Rotate the card and increase circle radius while dragging the card

LeoZ test
Moderator Tag

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


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 comment
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 comment
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.
  • Create New...