Jump to content


draggable y following mouse when draggable type is "x"

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

says .y returns "The current y (vertical) position of the Draggable instance."


However, my codepen shows that when you use a Draggable with type x, the resultant y values during a drag do not return the current y position of the draggable, but rather something closer to the relative y position of the mouse.


What should I do differently here?

See the Pen jEgBWQ by jedierikb (@jedierikb) on CodePen

Link to comment
Share on other sites

I think you may just be misunderstanding what "y" means in this context. From the docs:


...it would be the y transform translation, as in the csstransform:translateY(...)



Remember, translation is always relative to where the element sits naturally in the document flow. Think of it as an offset of sorts. 


Furthermore, if your Draggable is only managing "x", I wouldn't expect it to also be updating "y" (although in this case it does). 

  • Like 1
Link to comment
Share on other sites

Thanks Jack.  


I am trying to synchronize the movement of other elements on a drag, and the draggable who leads the pack might be of type "x", "y", or "x,y".  As you can see, I got snagged when I started moving things around with only an "x" -- the rest of the Blue Angels flew away in another direction :-)


Not to be contentious, but in the documentation in the bit you cited, that passage begins by saying "So for a Draggable of type:"x,y", it would be the y transform translation, as in the csstransform:translateY(...)"  


In the case of draggable type "x", I would expect the first sentence in the documentation to be honored -- "The current y (vertical) position of the Draggable instance".


Also, if it is of interest, the .y value jumps to where I would expect it to be onThrowUpdate

See the Pen PwMpeB by jedierikb (@jedierikb) 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.