Jump to content
GreenSock

harrynorthover

Responsive Draggable component.

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

Hey Guys,

 

I'm using the Draggable component in a horizontal list view that is responsive. Here's an early prototype http://lab.harrynorthover.com/timeline/.

 

As you can see in the prototype, the content above the draggable component is responsive and will resize down to 640 pixels. The issue I am having is how to scale down the scrubber at the same time. Is there a way to adjust the translate3d values through Draggable so the scrubber scales down at the same pace? 

 

I've tried scaling down the width of the scrubber or applying a negative margin left but then the drag amount becomes offset/incorrect. Is there a way to refresh the Draggable component, or scale the values down to it keeps in proportion with the rest of the content?

 

What's the best practice for tackling resizing issues like this with Draggable?

 

Also, is there a way to invert the direction of the dragging? So the timeline moves in the opposite direction? 

 

This is an excellent component by the way! 

 

Thanks,

Harry.

Edited by harrynorthover
Link to comment
Share on other sites

Hi Harry and welcome to the forums,

 

One chance could be to create the draggable instance through a function that you could execute on DOM ready or window.onload

 

With that function you can get the draggable element's parent new width and apply to the bound variable:

var parent = $("div#scrubberParent"),
    scrubber = $("div#scrubber");

fucnction createDraggable()
{
    Draggable.create(scrubber,
    {
        type:'x',
        bounds:parent
    })
}

So with a resize event you can call that function again and reset the draggable element's bounds.

 

Jack in this case, creating the draggable instance more than once, is there garbage collection or overwriting for the previous instance?

 

Hope this helps,

Rodrigo.

Link to comment
Share on other sites

The upcoming version of Draggable will check for older instances on the same element and disable() them if it finds any. You can certainly do that manually if you prefer. 

 

Another nice thing about the upcoming release is that it has an applyBounds() method that you can call anytime and it will recalculate the bounds and apply them appropriately (in case something changed). That's a bit cleaner than recreating a new instance constantly. 

 

We're updating the docs and preparing to push the new version out very soon. Should be released in the next day or two. 

Link to comment
Share on other sites

Thanks Jack and just one more word:

excellent-4689_preview.png

Rodrigo.

  • Like 1
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.
×