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

What is Framer? Join the Community
Return to index
Rhys Merritt
Posted Feb 13 - Read on Facebook

I have a new question! Been stuck on all morning.
I have created a Super layer and am attempting to restrict the layer from being initially dragged downwards the way a regular app would restrict a user from scrolling beyond the available content.
Additionally, I would like to restrict the layer from scrolling upwards past total height of the layer.
Are there options for restricting the draggable layer beyond certain values?
DL - http://share.framerjs.com/q366tbstskz0/

4 Comments

Matt Wujek

I've used this trick in the past:
layer.on Events.DragMove, ->
if layer.y > desiredY
layer.y = desiredY

http://share.framerjs.com/yf1c5swknu43/

Rhys Merritt

Freaken legend! Thanks so much Matt! Extra question, because I am a pain in the arse.. Would you have a solution in mind for emulation the pull down feature similar to Twitters 'pull to refresh' function? I am of course happy to explore this myself.. I should probably find out alone so I can learn more! hahaha.. Thanks for your help on that mate :)

Matt Wujek

No problem! I think that someone has probably already posted this in the group. I would think about these things when you make the 'pull to refresh' interaction.
1. Use conditional statements to check y-position
2. If you want the drag to automatically stop, you can do something like this:
layer.on Events.DragMove, ->
if layer.y > desiredY ... layer.draggable.enabled= false
layer.on Events.DragEnd, -> ... layer.draggable.enabled= true
3. Add refresh element on DragEnd:
layer.on Events.DragEnd, -> ... refresh.states.switch('stateName')

Nate Moore

maxDragFrame might be another option for restricting dragging? Although it's not in the Docs yet, I don't think.

layer.draggable.maxDragFrame = new Frame {properties go here}

http://share.framerjs.com/szr7h207lybn/

Read the entire post on Facebook