Jump to content


Draggable with 3D rotation

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

I am lost.



I researched how to do this but really couldn't come up with anything specific for doing this with Draggable (and ThrowProps). I feel like I am missing something obvious here.


How can I make the left-hand side box flip (with rotationX) instead of spin:



I tried (poorly) with the right-hand box box.



Can anyone point me in the right direction?





See the Pen oeHzn by andrewleith (@andrewleith) on CodePen

Link to comment
Share on other sites

Draggable doesn't handle 3D rotation out of the box.

What you can do is create an invisible proxy Draggable that uses its position to set the rotationX of another element. 

In the CodePen demo below drag the blue (proxy) div down to spin the grey div (target)



  • Like 2
Link to comment
Share on other sites

Wow Carl, thanks. I don't think I ever would have gotten to that on my own.


I'll certainly use this as a basis for what I'm trying to do. I'm a bit concerned that the proxy is going to get in the way of other clickable objects behind it, but I'll deal with that when I get there.


Thanks again,


Link to comment
Share on other sites

Awesome, thanks Jamie.

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.