Jump to content


Draggable behavior on document scroll

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

I'm trying to set up my page such that my document's scroll behaves exactly like a 'scroll' draggable. What I'm really after is document scrolling that snaps to certain areas of the page, but with all the silky physics of Draggable — I basically want my scroll events to act just as if they were throws. 


For example, look at GreenSock's own "scrolly knob" demo. When the scroll area is dragged, or when the knob is turned, the scroll velocity is animated smoothly to a stop at one of the snap points. But when the content is manually scrolled by the user, there's no inertia or snapping. What I want is for mouse scrolling to behave just as the other scroll methods do.


Any help with achieving this effect would be greatly appreciated!

Link to comment
Share on other sites

I would suggest you only implement the 'snap to position' part of this, and leave inertial scrolling to the browsers/devices that already implement it. Users are familiar with how their device/browser scrolls, and trying to modify that (especially if it isn't perfect is just going to frustrate users. I know it frustrates me every time I encounter it, and it's usually enough to make me leave the site.



var scrollTimeout,
    content = Draggable.create(target, {
      type: "scrollTop",
      throwProps: true,
      onDragStart: function() {
        content.onscroll = null;
      onDragEnd: function() {
        content.onscroll = contentScroll;

// debounce the scroll event so it only occurs after scrolling 
function contentScroll() {
  scrollTimeout = setTimeout(scrollComplete, 300);
function scrollComplete() {
  // determine snapping value here...
  TweenLite.to(content, .3, { scrollTo: { y: somevalue } });

content.onscroll = contentScroll;
  • Like 2
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.