Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
prashantpalikhe

Auto-scroll for GSAP draggable

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

Is there a built in option to auto-scroll the container of a draggable element when the draggable is moved beyond the container?

 

I am currently hooking up to the onDrag event and doing thing based on Y pointer. I kinda get the result I want. But still curious if there was a default option provided or anyone else has done it better.

Link to comment
Share on other sites

Hi and welcome to the GreenSock forums.

 

Absolutely, Draggable creates a scroll proxy element that allows the overscrolling feature in both, vertical and horizontal scroll.

 

Check the final example of the following link and you can change the Draggable instance to scrollTop or scrollLeft to see it in action. Also you can test it with and without the Throw Props Plugin that gives you a cool kinetic motion based on the throw speed:

 

http://www.greensock.com/draggable/

 

Let us know if this is what you're after, if not please check this post in order to create a reduced sample in codepen:

 

http://forums.greensock.com/topic/9002-read-this-first-how-to-create-a-codepen-demo/

 

Rodrigo.

Link to comment
Share on other sites

I understood the question a bit differently - I think he was asking if, when dragging an element's x/y (NOT scrolling), and he reaches the edge of a scrollable container, if it'd automatically scroll for him. The answer is "no". Sorry, there is no such feature in Draggable. It'd be a bit tricky because it'd have to be able to sense any and all nested containers and try to figure out which one should scroll if there are more than one. 

Link to comment
Share on other sites

H

 

I understood the question a bit differently - I think he was asking if, when dragging an element's x/y (NOT scrolling), and he reaches the edge of a scrollable container, if it'd automatically scroll for him. The answer is "no". Sorry, there is no such feature in Draggable. It'd be a bit tricky because it'd have to be able to sense any and all nested containers and try to figure out which one should scroll if there are more than one. 

Hi,

 

Yes. You understood me correctly. Thanks for the reply. I wills stick to my onDrag handler then.

Link to comment
Share on other sites

  • 7 months later...

I understood the question a bit differently - I think he was asking if, when dragging an element's x/y (NOT scrolling), and he reaches the edge of a scrollable container, if it'd automatically scroll for him. The answer is "no". Sorry, there is no such feature in Draggable. It'd be a bit tricky because it'd have to be able to sense any and all nested containers and try to figure out which one should scroll if there are more than one. 

I have exactly the same question. I need to drag some small elements inside a horizontally scrollable container, and I want that container to scroll automatically when element or mouse pointer is somewhere near left or right bound.

Here's codepen: 

See the Pen EaWjZG by ulmix (@ulmix) on CodePen

Algo: onDrag:

1) check where the mouse pointer is currently:

1a: if near bounds, go to 2

1b: if not, clearInterval(scrolling)

2) check if we're scrolling already. If not, then start setInterval, where I change scrollLeft of container, and trying to change draggable element position and update() it.

onDragEnd: stop scrolling if it is in process.

Unfortunately, update() behaves VERY strange here: element jumps all over the place. Why? I can't understand.

 

And considering your "It'd be a bit tricky because it'd have to be able to sense any and all nested containers" - that's not right. Solution is simple: check only parent container by default, and give us option to set custom element as "scroll container".

So please, GSAP developers, hear me: the autoscroll option for your Draggable plugin is very desirable! :)

 

=====

UPDATE, additional questions.

tried to implement more simple autoscroll, based on mousemove instead of setInterval - just like jQuery UI Draggable works. Here's what I've got:

1. 

See the Pen KwWpbB by ulmix (@ulmix) on CodePen

- implementation for XY drag. Just works.

2. 

See the Pen NPpqoY by ulmix (@ulmix) on CodePen

- implementation for X drag (" type: 'x' " added) - strange behaviour, drag element jumps far forward when trying to scroll

3. 

See the Pen pveJYx by ulmix (@ulmix) on CodePen

- implementation for X drag (" lockAxis: true " added) - works normally.

So, the question is: why option 2 - with type: 'x', but without lockAxis: true - is not working properly?

Link to comment
Share on other sites

Sorry about the tardy response, ulmix - it looked like this was a question about a non-supported feature (and I guess technically it was), but I think I discovered what was causing the problem in your example and it was in the update() method; it'd only happen if you disallowed "y" movement. It should be fixed in the next release. You can test a preview at https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/Draggable-latest-beta.js. Does that help?

  • Like 5
Link to comment
Share on other sites

  • 1 month later...

 

Now we have Great solution for that in new GSAP ( version 1.16.0 ) Draggable plugin :

 

pls check this out : 

See the Pen YPvdYv by GreenSock (@GreenSock) on CodePen


 

 

GSAP ( version 1.16.0 ) :

 

Draggable has a new " autoScroll " special property that you can set to a number to enable auto-scrolling when the user drags near the edge of a scrollable container. For example , Draggable.create(element, {autoScroll:1});  will auto-scroll at the default speed, whereas autoScroll:2 would scroll twice as fast≤ etc.

  • Like 3
Link to comment
Share on other sites

That's really nice feature I was going to do it myself.. perfect timing :)

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