Jump to content


Invert draggable direction

Go to solution Solved by GreenSock,

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

Is there a way to reverse (invert) the direction of a Draggable instance?  



See the Pen rLAjJK by rfenik (@rfenik) on CodePen

Link to comment
Share on other sites

Hello ryanf, and Welcome to the GreenSock Forum!


Do you have any additional info regarding this? I am not exactly sure what you mean. 


In the Draggable Docs:




You can see that the Drag type property, allows you to specify the type of dragging

  • type : String - indicates the type of dragging (the properties that the dragging should affect). Any of the following work: "x,y" (basically the translateX and translateY of transform) | "top,left" | "rotation" |"scroll" | "x" | "y" | "top" | "left" | "scrollTop" | "scrollLeft". The default is "x,y" for all browsers except old versions of IE that don't natively support transforms in which case "top,left" is the default.

Any additional info you can provide can help use help you!


If you can please provide a limited codepen demo we can help you better by seeing your code to test live.




  • Like 2
Link to comment
Share on other sites

  • Solution

Like Jonathan, I'm a bit confused by the question. Do you mean that if you drag left, you want it to move right, etc.? If so, no, there's no specific setting for that but you could code something up by using an invisible proxy element as the Draggable, and then use an onDrag to apply whatever logic you want and move something else. 

  • Like 5
Link to comment
Share on other sites

I was looking for when you drag left, wanting an object on a timeline to move right. I ended up using 1-(this.x) on an invisible element to invert the position of the timeline like you suggested.  Simple enough, works great.  Thanks.  


See the Pen rLAjJK by rfenik (@rfenik) on CodePen

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.