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

What is Framer? Join the Community
Return to index
Edwrd Han
Posted Jun 29 - Read on Facebook

Hey guys. I'm a relative noob here, and I'm trying to figure out how to work with draggable layers. I have a draggable main layer with a bunch of sub-layers arranged on it, and I would like to be able to drag/scroll through the sublayers by dragging the main layer.

When I do not set constraints, then I can drag the main layer anywhere I want and 'scan' through my sublayers. The problem is when I reach the end of the sublayers, the main layer just gets dragged into no-man's-land. I want to limit the area where I can drag the main layer but when I put constraints on there, such as x, y, width, height, it just causes the main layer to bounce back to the x,y position of the constraints.
I know that's what its supposed to do but is there anyway to get it to bounce back when it reaches past a certain point, but behave as if there are no constraints until then?

Sorry for the wordiness... here's my test code so far...

3 Comments

Krijn Rijshouwer

Hey Edwrd Han ,

I don't fully understand what the desired interaction is in this prototype so I don't know if I fixed it. But I think that you are looking for the overdrag property (which should be false) → http://share.framerjs.com/urgcibxmy0h0/

Edward Sanchez

Wrong Edward Krijn Rijshouwer cc Edwrd Han

Edwrd Han

Thanks Krijn. I think my actual problem is that my draggable layer starts off at the upper left quadrant of my constraints, so I can't shift it left/up without it bouncing back.

So my solution is that I have to set the constraints frame farther off the screen and give my draggable layer some margin to move.

Also need to leave room between where my sublayers start and the left edge of my draggable layer so I can drag left and see more of the sublayers to the right until the left edge of the draggable layer bumps up against the constraint.

Hope that makes sense, appreciate the help.

Read the entire post on Facebook