Jump to content
Search Community

Send Draggable to Next Snap Point

wwilkins 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

Hello GreenSockers,


I just set up a row of Draggable cards that all move together using Draggable and some advice from this forum. The dragging works great but doesn't play nice with other code that is using buttons to move the cards. Would someone please recommend a way to drive the draggables with buttons?




Link to comment
Share on other sites

Hi wwilkins  :)


Draggable.create() returns an Array of Draggable instances , so you should define the array key to select and then tween with below method :

try something like this  :

var draggables = Draggable.create(".cards", {

var forwardBtn = document.getElementById("fbtn"); 

forwardBtn.onclick = function() {
TweenLite.to(draggables[0].target,1, { x:'+=100' , onUpdate:draggables[0].update , onUpdateScope:draggables[0] }); 
Link to comment
Share on other sites

Hello wwilkins, and Welcome to the GreenSock Forum!


Have you tried any of the following Draggable vars parameters?


Have you tried to specify a draggable target to trigger the element. Define a trigger element - maybe you want only a certain area to trigger the dragging (like the top bar of a window) - simply define that child element as the trigger, like trigger:"#topBar".

  • trigger : Element | String | Object - if you want only a certain area to trigger the dragging (like the top bar of a window) instead of the entire element, you can define a child element as the trigger, liketrigger:yourElement or trigger:"#topBar" or trigger:$("#yourID"). You may define the trigger as an element or a selector string (which gets fed to whatever TweenLite.selector is), or a jQuery object.

Also you can add the data-attribute  on your element to tell it to ignore or not .. data-clickable="true" .. data-clickable="false"

  • dragClickables : Boolean - By default, Draggable will ignore clicks on <a>, <input> <select>,<button>, and <textarea> elements (as well as any element that has a data-clickable="true" attribute), allowing the browser's default behavior (like clicking on an input would give it focus and drop the cursor there to begin typing), but if you want Draggable to hijack those clicks and initiate dragging instead, set dragClickables:true.

Maybe using onPress 

  • onPress : Function - a function that should be called as soon as the mouse (or touch) presses down on the element. Inside that function, "this" refers to the Draggable instance (unless you specifically set the scope using onPressScope), making it easy to access the target element (this.target) or the boundary coordinates (this.maxX, this.minX, this.maxY, and this.minY). By default, thepointerEvent (last mouse or touch event related to the Draggable) will be passed as the only parameter to the callback so that you can, for example, access its pageX or pageY or target or currentTarget, etc.

Resource Draggable Docs: http://greensock.com/docs/#/HTML5/GSAP/Utils/Draggable/


To better help you, can you please provide a codepen demo so we can see your code in a live editable environment? .. It can be of great help!

Here is a nice video tut by GreenSock on How to create a codepen demo example.


I hope this help! :)

Link to comment
Share on other sites

And as Diaco was showing with calling an onUpdate function to update the Draggable during your tween, its important to read about what the update() method does:



I think this applies directly to your situation.


Also, like Jonathan suggested, if we can see a simple demo, it would really help. 

You can fork any of our Draggable demos and build a quick example: http://codepen.io/collection/AtuHb/

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