Jump to content
Search Community

Draggable and then Tween being offset...

mimeartist 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

Slightly confused in that when I drag an item using draggable it works fine, but then when I try and move the image to a particular place by tweening it to say position 0,0 it is then offset by the amount (I think) I dragged the item from the original spot...


I tihnk I'm using all the latest code... but is there a place to grab the other files other than just TweenMax... eg. is Draggable and ThrowProps and CSSPlugin available on a CDN?




Link to comment
Share on other sites

Hello mimeartist_played!


Try this to get the GSAP CDN links:

  1. If you scroll to the top of this page and click the get GSAP  link in the top left sidebar, under the Featured Links.
  2. The modal box will animate in
  3. Now Pick Your Flavor - Click the JavaScript JS blue bar
  4. Then the contents of the modal box will animate showing where you can choose your GSAP JS libraries.
  5. You will see a textarea box with the cdn links in it.
  6. Underneath the textarea you will see radio buttons with the Robust radio button already selected.
  7. If you select the Customize radio button you will see other options animate in. There you will see most of the GSAP plugins as checkboxes.
  8. Under Plugins, click CSS checkbox for the CSSPlugin CDN link
  9. Under Extras, click Draggable checkbox for the Draggable Plugin CDN link
  10. Once you select a checkbox that CDN link will show up in the textarea box.
  11. Copy the links in the textarea, and your ready to fly!

Also here is a link to the GSAP list of CDN libraries: http://cdnjs.com/libraries/gsap/


If you need help with that Draggable tweening issue, it will be really helpful to create a codepen demo example so we can see your code in action, to better help you!


Check out this link by GreenSock on How to create a CodePen Demo Example.


Thanks... Does that help?

  • Like 2
Link to comment
Share on other sites



Are the tween and Draggable instances pointing to the same properties. For example if the Draggable affects x/y and the tween left/top you'll get the results you're indicating. But if both instances point to the same properties it should work, unless, like Jonathan pointed, you're not using the latest version of the engine.


In the mean time I set up this codepen:


See the Pen gpKGx by rhernando (@rhernando) on CodePen


Feel free to fork and adapt it to your scenario.



  • Like 3
Link to comment
Share on other sites

Yeah, I'm wondering the same thing as Rodrigo. You mentioned "position" but you didn't say HOW you're animating to that position - are you using top/left or x/y properties? Those are completely distinct in CSS. I wonder if maybe you're using a Draggable of type:"x,y" (the default) and then you're using top/left in your tween. Remember, in CSS, x and y are transforms which can be though of as offsets from where the element lines up naturally in the document flow. In other words, if a box is normally positioned at the very top of the browser window (0 vertically) and then you apply top:100 and y:100, it would end up 200 pixels from the top of the screen. 


Also, ThrowPropsPlugin isn't available on the CDN because it's a members-only plugin (the CDN is completely public by its very nature).

  • Like 1
Link to comment
Share on other sites

Thank you all for your help, I've set up all the CDN's to the latest ones, so that will help enormously in future, and thanks for setting up that codepen... I promise to use that in future :)


...and Rhernando & Jack, you're right it was because I was setting up a draggable with type:"x,y" and then Tweening left, top so have changed the draggable to "top,left"


...and seems to work (or am I better off changing the Tween?) 


Anyway, thanks again for all your help, the members here really do it proud

Link to comment
Share on other sites

...and seems to work (or am I better off changing the Tween?)

Mhh I don't see any reason why, you should make that decision based on what you need to do.


One of the great things about Draggable is that, even if the elements have a relative positioning and you set the Draggable type to "top,left", when you drag it doesn't affect document flow, that tells how every detail is being looked up in the toolset development.


If it works better using top/left than x/y, then use it that way. If it ain't broken, don't fix it ;)



Link to comment
Share on other sites

If it were me, I'd probably switch the tween so that everything is using transforms (unless you're targeting IE8 or earlier which I highly doubt). Transforms are "cheaper" performance-wise because the browser can just offload them to the GPU and not worry about document flow at all. That being said, there's nothing "wrong" with using top/left. 

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...