FLICK LIST WITH MOMENTUM AND BASIC EDGE BOUNCING

Ariya Hidayat did some amazing series on kinetic scrolling. Many thanks to him for a great job. If you are interested in the physics behind this, check them out.

The 2nd post in the series explained the details behind creating kinetic scrolling with momentum. The demo for the post is a flick list with momentum but without the edge bouncing effect (Check it out).

I decided  to see if I could add simple edge bouncing to what currently exists, and found out it was quite easy.

Here is the demo:



The changes are made to the scroll() and autoscroll() functions

Scroll function

Before:
After:

Autoscroll function

Before:
After: For the edge bouncing effect, we want to allow the list  move over the edge while it is manually dragged and bounce back when it is released.

To accomplish this, as shown in the code snippets above, I take out the code that enforces edge restrictions from the scroll function, this allows the list move beyond the edge limits while its manually dragged. I then add the restrictions to the auto-scroll function, so the enforcement happens on auto-scrolling instead and tada!!!.

This is just a very simple idea. I think this can be improved, one issue is the bounce feels quite sharp. Let me know.

Update:

Release function

Before:
After: