Jump to content
Search Community

Draggable: accessing overscroll information

bonometric 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



I'd like to replicate a popular scrolling effect in mobile apps these day. When scrolling a list with a header image, overscrolling would cause the header image to grow in relation to your overscroll amount. I listened to the 'onDrag' event, and then query the 'y' property of the Draggable instance. It seems that the reported value does not take overscroll into account. 


I patched the Draggable source to enable this (detail below), but I am wondering, is there's a proper/native way of doing this?



This is my patch to Draggable.js:

//pass instance to scroll proxy object so we can dispatch event and append overscroll information
677-ish: ScrollProxy = function(instance, element, vars) {
//now when instantiating scrollProxy, pass reference to self
1824-ish: scrollProxy = this.scrollProxy = new ScrollProxy(self, target, ...
//line 752-ish right after if (offsetLeft || oldOffset) { .. }, append offset info and dispatch a new overscroll event
instance.offsetLeft = offsetLeft;
//line 785-ish right after if (offsetTop || oldOffset) { ... }, append offset info and dispatch a new overscroll event
instance.offsetTop = offsetTop;

So now in my onOverscroll handler I do something like:

var offset = myDraggableInstance[0].offsetTop;
var headerScale = 1 + ((offset / 120) * .5); //scale the header up to 1.5x when overscroll is between 0-120px


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