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.

Demos:
- https://db.tt/bJqVil5A - Fling an object
- https://db.tt/XlOGXQvL- Crop a photo
- https://db.tt/8U3UgwAx - 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, http://instagram.com/imtotallynormal)

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: http://iamralpht.github.io/physics/ - 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).

43 Comments

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! https://github.com/koenbok/Framer/pull/164 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 https://github.com/dabbott/FramerScrollPhysicsDemos. Swapped out weather demo for simpler scrollview with draggable rows demo, https://db.tt/dYLF2AmP, 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.

Callil Capuozzo

I'm having trouble getting the inertial scroll to work on Jay Stakelon's Frameless browser on my iPhone. Any idea why this might be happening?

edit: kind of working now - not sure what changed but it will break on reload in any browser - requires quitting the browser to get it to work again.

Devin Abbott

Hmm… I’ve seen this happen for my weather demo, and I've had to reload the page to get scrolling working properly. I’ve observed it happening more frequently when I’m on weak wifi and when the photos don’t load fully. I’ve seen it happen on iOS but not Android. I’ve never seen it happen on my layer fling or photo crop demos.

First guess: the browser falls back to a cached non-custom version of Framer.js that doesn’t have inertial scrolling (under certain conditions: maybe downloading Framer.js is taking too long.. maybe the network's blocked while downloading photos). The effect of this would be that everything works except the inertia. This should be easy to test in the console.

Second guess: there’s a javascript error somewhere due to a race condition when the page loads. This should also be easy to check in the console.

Third guess: Maybe Framer for studio is compiled with some special onDomReady callback or something that you don’t get by just dropping a new Framer build in, so a custom build inherently doesn’t work quite right. Seems unlikely though.

I’ll investigate a bit if I see this happen again… though your case sounds a little different, since reload breaks things instead of fixing them.

Have you been able to narrow it down any more?

Koen Bok

Third guess is incorrect :-) The Framer build in Studio is the exact same.

Jay Stakelon

Callil Capuozzo just saw this now - I'll check it out this week and see if I can contribute any insight to why it wouldn't work

Patrick Keenan

Is there any other way to achieve a scrolling pane with draggables inside? This seems timely, but unfortunately not working on iOS simulator

최최보금

Devin Abbott wow! excuse me, chould i see your code ?

Doug Proctor

this is really, really good. any news on the PR?

Jordi Martinez Ortega

any updates? :)

Jordan Robert Dobson

I've seen progress on github. :)

Jordi Martinez Ortega

actually, I downloaded the scroll-component branch and compile it. Tried to replace the resulting framer.js on one of my projects but the device view got all screwed up and didn't show or it showed out of scale

Koen Bok

Yeah there is good progress here but it's not completely ready yet.

Chris Lee

Devin Abbott, any chance you could wrap this as a module in the meantime?

Blaine Billingsley

Could you share those framer projects? They are so great!

Jason Ogle

Well done Devin, thanks for your great contributions!

Benny Chew

Very cool!

Jordi Martinez Ortega

nice work man!

Josef Richter

scroll.scrollToPoint(
{x:200, y:100},
animate = true,
animationOptions = {curve:"ease", time:10}
)

YESSSS! Thanks for this :-)

Read the entire post on Facebook