This is a read-only archive of the Framer Community on Facebook.

What is Framer? Join the Community
Return to index
Callil Capuozzo
Posted Dec 11 - Read on Facebook

I took a stab at writing a very simple drag-based scrolling for all your on device prototypes. I know a bunch of questions have been posted here recently asking for a simple solution to scrolling on mobile and I think I've got a pretty good one.

Obviously works best to view it on a mobile device because that's where the layer.scroll breaks

EDIT: added a slight decay when dragging pas the edge to better emulate the over-scroll behavior!

Preview it here:
https://dl.dropboxusercontent.com/u/62995/betterScroll.framer/index.html

Grab the code: http://framer.link/dl.dropboxusercontent.com/u/62995/betterScroll.framer.zip

6 Comments

Koen Bok

Very nice and simple! The only two things that are not perfect yet:

- Dragging beyond the edge should get resistance
- You now round the end animation so that it never runs into a wall. You should be able to detect this with .on("change:y", ...) and replace the animation.

The above two are kind of tricky and where I got stuck with my implementation. But I'm pretty sure they're doable.

Callil Capuozzo

Awesome feedback Koen Bok
stuff like that really helps me learn! Your first point was pretty easy to fake by making a simple calculation to decay during drag move. But I'm not so sure about the second. Is there a way to learn more about these kind of implementations that are already in place? I'm not sure where to start looking.

Koen Bok

Iirc Joe Hewitt did a really good implementation that I looked at. On mobile so can't find link but should be easy to google.

Jordan Robert Dobson

I remember this from a while ago and I think this is what Koen is talking about: https://github.com/joehewitt/scrollability

Koen Bok

It seems to be kind of broken here. But the math is still in there and correct.

Read the entire post on Facebook