Jump to content

Joe Hakooz

Draggable triggered via element

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

Hi all,

I was wondering if there is a way to move a draggable by clicking another element?


I've created a horizontal slider similar to the jQuery Mobile Slider.

There are several "snaps" along the way. I would like to move the draggable to one of these "snaps" by clicking a button. 


The problem with simply tweening the draggable...

When dragging, the draggable stays within the bounds (specifically when dragged all the way to the right). I suspect it is auto calculating a negative margin. However when I tween the draggable to the far right, it goes out of the bounds. 


I could implement my own negative margin calculation but was hoping there was a built in way to do this. 


Thanks for any help!


Link to comment
Share on other sites



What you could do is tween a JS object value on UI event, click in this case, and use that tween's onUpdate to pass the value to a Draggable instance simulating a UI slider.


This are two samples made with Draggable that update a tween's progress and vice versa:


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


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


Another cool sample is the one crafted by Jamie in this post:




What you could do is that, instead constantly update the value you could update a paused tween by a fix amount, what in JQuery's UI slider is called a step.


Also it'll very helpful if you could create a reduced sample in jsfiddle or codepen to take a better look.



Link to comment
Share on other sites

Thanks for the quick response Rodrigo. 

I will give these examples a closer look...



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.