Jump to content


Is it possible to use draggable to rotateX or rotateY (3d rotation)?

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

Since that draggable could be used to drag and rotate one element in 2d platform, I'm wondering that is it possible to control the element to rotate in 3d?

I've found that there's a codepen  showing how to make one element both draggable and rotatable in 2d, but I can't find any way to expend this method to 3d rotation. I know that I can setup two sliders to control X rotation angle and Y rotation angle, but what I want most is some sort of "control point" to make the 3d rotation happen.

Could you please give me some advices?


See the Pen doPLME by MAW (@MAW) on CodePen

Link to comment
Share on other sites

Hi and welcome to the GreenSock forums,


Please take a look at the demo in this article


Notice how you can use Draggable to spin a 3D cube. 


The idea is that you can use a Draggable instance to generate values that you apply to any property of any object.


Take a look at this demo and drag the blue div down: 



Now try dragging the grey div down to make it spin



And here you can drag over a div to control the progress() of a TimelineLite()



Hopefully these examples show the flexibility of Draggable. 

Link to comment
Share on other sites

Hi Carl,


Thanks for your reply!


I've noticed that demos you presented are using proxies to trigger target's rotation, but those proxies are not sub element of the target.


I'd like to know that is it possible to use a trigger inside the target to make this 3d rotation happen? That means when dragging, we can make the trigger do 3d rotation along with the target.

Link to comment
Share on other sites

That sounds like it would be extremely difficult or impossible. Draggable does nothing to convert or project 2D mouse coordinates into 3D space. Sorry.

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.