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

What is Framer? Join the Community
Return to index
Devin Abbott
Posted Apr 02 - Read on Facebook

Ever wanted your draggable layers to scroll like native iOS, while still being able to bind events to position? What about horizontally draggable rows within a vertically draggable scrollview? Now you can have all that and more!

New LayerDraggable properties:
- draggable.inertialScroll (keeps moving after you let go)
- draggable.overscroll (drags with resistance past the edges - will spring back if inertialScroll is true)
- draggable.directionLock (can lock in a direction.. same as iOS)
- draggable.multipleDraggables (propagate touch events until directionLock)

It’s compatible with existing properties: speedX|Y, calculateVelocity, maxDragFrame, and layer animations. The physics constants are adjustable if you don’t want your Android to feel like an iPhone.

- - Fling an object
- Crop a photo
- - A re-creation of the Yahoo Weather app with inertial scroll, multi-direction drag, parallax scroll, paging scroll, pull to refresh (photo credit to Kim Alvarez,

PS: As usual, it runs slow on desktop Chrome unless you make the width of your browser window smaller… make it about phone-width. No need to do so on Safari.

The inertial scroll code is written from scratch, but based on the physics concepts from: - using a spring and friction simulation feels just right. I’ll make a PR to Framer soon (though, I’m not sure if Framer is going in this direction).


Jordan Robert Dobson

Nice work! I have a few elements very close to this. I'm really interested to see your approach!

Ed Chao

this is awesome. thanks for the contribution.

Joshua Tucker

Thanks for taking the time! Excited about the direction lock. I have been meaning to try to work on a way to apply it myself but haven't had a chance. Can't wait!

Johannes Eckert

Wow! I want to use this, I need to keep this! And this needs to be in framer! Good work!

Giovanni Caruso

Wanted to recreate the Yahoo News Digest layers scroll so badly but with my poor coding experience it was impossible. Can't wait to have this in Framer. Thanks for your contribution!

Koen Bok

I'd be every interested in a better scrollview.

Koen Bok

I'm also very interested in API improvements (ignoring backwards compat) for things like maxDragFrame, directionLock etc.

Andreas Mitschke

ralph again, awesome integration.

PS: It runs on 60fps in chrome (desktop) - not sure what you are talking about with "usually slow" ?

Koen Bok

Andreas in my experience Chrome has very different/varying graphics performance characteristics between version/channels/platforms at the moment.

Andreas Mitschke

Koen Bok it does, as every other browser engine. Labeling chrome as specifically faulty is kinda odd to me.

However, I'm not running MAC, which might be one of the biggest reasons why Chrome's running smooth here.

Koen Bok

You are right. But I mainly test in Chrome and Safari on Mac so I compare between those :-)

Jason Ogle

Is the source code available for this?

Devin Abbott

Koen Bok - I think if we ignore a little backwards compat, it can be quite a bit easier to use. I'm probably going to make a PR with what I have currently, and just open it up for discussion - I tried a few different approaches before settling on something non-instrusive, but I'm sure you'll have a better sense for what we can safely modify.

Andreas Mitschke - valid point. My evidence here is anecdotal. Maybe I just didn't want to say "if it seems slow, it's not my code!!!" ;). Good to know it's 60fps on your machine.

Jason Ogle - not yet. I plan on posting it this weekend, time permitting.

Jordan Robert Dobson

Devin - thanks for the link to that article. It helped me understand spring physics much better. His demos and JS are really quite easy to pull apart.

Cemre Güngör

Devin Abbott psyched to play with this when you ship it!

Fran Pérez

I could really use this now… :)

Jason Ogle

Thanks for your innovation and contributions to this community!

Chad Lonberger

Devin Abbott did you get a chance to release this? Thanks in advance

Devin Abbott

Chad Lonberger - Not yet. I will on Sunday.

Devin Abbott

My pull request is up! It's very rough, but give it a shot if you're feeling adventurous :)

I wrote a bit about implementation strategy and other things. I always write too much.

Demo code available at Swapped out weather demo for simpler scrollview with draggable rows demo,, to play it safe IP-wise.

Chad Lonberger

Look forward to checking it out thanks

Koen Bok

Wow. This is great.

Jordan Robert Dobson

Devin, very well done. I'm looking to integrate this into my TableView work tonight.

Koen Bok

I have a release to prepare for today, but I will digest this and have feedback in a day or so. Super excited about this.

Read the entire post on Facebook