bonometric

Hi, 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; _dispatchEvent(instance,"overscroll","onOverscroll"); //line 785-ish right after if (offsetTop || oldOffset) { ... }, append offset info and dispatch a new overscroll event instance.offsetTop = offsetTop; _dispatchEvent(instance,"overscroll","onOverscroll"); 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 Thanks!

Thanks Carl, that's a neat trick and solves my problem!

Hi, I've been trying to find a way to predict where throwprops tween will finally land (absolutely stops): I did my own velocity detection via ThrowPropsPlugin.track(...) at touch-up event, i run something like : ThrowPropsPlugin.to(target, { throwProps:x:{velocity:1200,min:0,max:800}}) I need to do something based on whether 'target' x final resting position is within certain value. Is there simple way to do this ? I looked at the .calculateChange() but that seems to require .calculateDuration() first, and I was not sure using those two is the right thing to do or will yield the best/accurate result... Thanks!

In a project I'm doing, I need to match easing feel of elements animated using CSS cubic-Bezier timing function (example:cubic-bezier(0.1, 0.9, 0.2, 1) using tweenmax. Is this supported in GSAP ? I'm trying to avoid writing my own cubic-Bezier plugin if possible Thanks! Orry