ftlabs/ftscroller

Limit bounce effect

Opened this issue · 3 comments

I've been digging in the source code and trying to figure out a way to limit the bounce effect.

As far as I know the bounce animation is dependable on the fling which makes it possible to bounce the page on almost the entire screen.

What I would like to accomplish is to limit that bounce to, let's say, half the screen size (for example).

The bezier curve on the bounce only have effect on the animation speed so if someone could point me in the right direction that would be great.

Hi there,

This is largely handled in the _flingScroll function. It is a bit dumb at the moment - it has a fling distance calculated from the fling bezier curve, and then it arbitrarily takes an eighth of this distance (https://github.com/ftlabs/ftscroller/blob/master/lib/ftscroller.js#L1119) and then further limits it to half the container size (https://github.com/ftlabs/ftscroller/blob/master/lib/ftscroller.js#L1122). It then uses the bounceDecelerationBezierto determine the appearance of the bounce.

If this isn't already respecting half the screen size - are you using a mouse/touchpad fling? Those are slightly special cases in that the OS tends to already simulate flings by sending scrollwheel events in series; for example, on OS X a touchpad scroll fling will send a series of diminishing scroll events even after the reader has taken their fingers off the touchpad, which we can't distinguish from actual scroll events... so that can rubberband further, and have a slight pause before it bounces back...

Hope that helps?

Hi,

I started investigating the parts of the code you mentioned. Created a new object property to define the distance (replacing the default 1/8) and another for container size and manage to reduce the bounce effect but it seems that it only has a visible effect until a certain value of distance.

Will continue to hack the script and do more testing on this.Will make a pull request with the changes I made when I'm done.

I'm using a touch fling (iPhone and Android phones)

Thanks for your help.

+1, please report back if you find something, @MippinTeam!