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.
- 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).