Jump to content
Search Community

autoscroll - without dragging an element and to a specific element

FatMunkey 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

Refer to the Codepen which is the autoscroll demo from GreenSock.


First off, I am totally new to GreenSock.


I love the smooth functionality of this right out of the box!  I need some additional things for my app and I am hoping for some pointers to get me rolling in the right direction.


(1) If you throw the green div and it flies out of view I want a corresponding button for that div (maybe in a top nav bar?) that will smoothly scroll the autoscroll area to bring that div back to the center of the screen.  This will make it easy to find that "lost" element.


(2) It would be useful to have four transparent bars (left, right, top, bottom) that always live on the edges of the autoscroll container and four squares (top-right, bottom-right, bottom-left, and top-left) that always live in the corners of the autoscroll container (maybe positioned outside of the autoscroll container?).  What I mean is that when scrolling occurs these eight elements always remain around the edges of the autoscroll container.  Then when the mouse hovers over these areas the autoscroll area scrolls in the corresponding direction. 


Note that I do not intend for this app to be used on mobile devices as ultimately I intend for this to be built out using Atom's Electron framework as a desktop app.  Because of that I am not concerned with the fact that hover is a problem on mobile devices.


It would be even better if the scroll speed was controlled by how far the mouse is inside of the border div.  For example, considering the right side bar, as the mouse enters the bar from the left the scrolling is slowest and the further to towards the right edge of the bar the mouse gets the faster the scrolling becomes.  I Hope I made sense there!


Lastly, this should not interfere with the default behavior of the draggable autoscroll.  That is, I still want the autoscroll to happen based on dragging a div to the edge of the container.


Any advise you have to offer on these two functionalities would be very much appreciated.

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

Link to comment
Share on other sites

I didn't quite understand your (2) - isn't that behavior exactly what Draggable already does? Hold your mouse near the edges and it keeps scrolling. The closer you get to the edge, the faster it scrolls. 


As for centering it when the element is thrown outside the bounds of the wrapper, I updated the codepen to show you a technique for doing that: 

See the Pen YPvdYv?editors=0010 by GreenSock (@GreenSock) on CodePen


I hope that helps!


  • Like 1
Link to comment
Share on other sites

Thanks for taking the time to answer and make the codepen.  I really appreciate it.


Regarding number 2 - No that is not what draggable autoscroll does.  It scrolls the container only when you are dragging something.  I want to ALSO scroll the container when the mouse hovers near the border (not dragging anything).  Having the divs all around the border of the container seems like a start.  The mouse moves into the div (maybe it changes color for some feedback) and scrolling happens.  I did this with the UI in Unity but that is totally different approach as it is not javascript or webpages.  The game engine actually had a big part in how that worked.


Regarding your answer to number one.  I have been at work all day but when I get I get home I will check out the code.  The codepen has only one shape and it seems to be moving the shape back into view rather than scrolling to the shape.  What about if I had fifty draggable shapes and want to scroll to the LOCATION of a particular shape as opposed to MOVING THE SHAPE back into view? 


Caps are for emphasis - not shouting intended.  LOL

Link to comment
Share on other sites

Regarding #2, yeah, sorry, that's not something we offer but I'm sure you could rig something up like that yourself. 


Regarding #1, it is NOT working the way you assumed; it's scrolling the container. It's not moving the box back into view. In other words, to center it I'm animating the scrollTop/scrollLeft of the container rather than the x/y of the box. That's what you wanted, right? 

  • Like 1
Link to comment
Share on other sites

Yes, I wrote that reply without looking at the code.  Your answer to number one is spot on.


Maybe I can set up a button with a click event to scroll to the location of the shape.  I will come back with a reply to this with my final result just for completeness.  It may be a few days.


Thanks for the help.

  • 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.
  • Create New...