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

What is Framer? Join the Community
Return to index
John Grendon Enderby
Posted Mar 27 - Read on Facebook

Hi guys! Does anyone know if it is possible to change the state of something while being dragged over another object/layer? i.e. something gets smaller when dragged over something else...

15 Comments

Joshua Tucker

Hey John! Are you meaning, for example, dragging an item into a Drag + Drop area and the item shrinks/grows in scale or something?

John Grendon Enderby

Yes exactly that, drag and drop is the idea. I want the layer to scale down and rotate based on where it is in relation to another layer, but still be held in place by the cursor. Eg. the scaling needs to be relative to the pointer/cursor, if that makes sense?

Jordan Robert Dobson

You'd have to detect if the position is inside another item.

Jordan Robert Dobson

I'm doing this a lot on projects just do a check on TouchMove of everything you want to check and see if it's inside.

Joshua Tucker

I suggested Utils.modulate as well via PM depending on his situation. I've found position detection to be tricky because of whether to use event.y, offsetY, screenY, clientY, etc. Especially when you put mobile into the picture. Way more tinkering needed, at least in my experience.

https://framerjs.com/docs/#utils.modulate

Jordan Robert Dobson

Ah. Yeah I have a helper that fixes all of that. :)

Joshua Tucker

Jordan Robert Dobson Module? Framer Code bro, come on now :P.

Jordan Robert Dobson

It sounded like he needed to know if it was over something... Not sure how modulate would do that.

Joshua Tucker

Jordan Robert Dobson I think his concept is really simple right now (new to JS/CS) so modulate is uni-directional in the thing I showed him. Essentially it's a drag + drop scenario. Either way. I'll show him both (just made quick videos to send to him).

Jordan Robert Dobson

Ah. Good work! Let us know where you land. :)

Joshua Tucker

Alright so essentially landed on either .modulate or just comparing all the x/ys of both layers in an if statement to see whether it's inside or not. Jordan, now to try this crazy module thing :P.

Josef Richter

Another more generic thing: right now we're setting states per individual layer. But it would often be helpful to define states for app or group of layers. This is what I mean:

current “layers-first” approach:

layerA
- stateOne
- - x: 0
- stateTwo
- - x: 100
- stateThree
- - x: 100 # (=do nothing)

layerB
- stateOne
- - x: 200
- stateTwo
- - x: 200 # (=do nothing)
- stateThree
- - x: 300

vs. “states-first” approach, shorter, more logical and easier to work with in my view:

stateOne
- layerA
- - x: 0
- layerB
- - x: 200
stateTwo
- layerA
- - x:100
stateThree
- layerB
- - x:300

Maybe there's some quick javascript "workaround" already, any js experts in here?

Joshua Tucker

Josef Richter It's pretty easy. Loop through a group of layers and give them states. Here's an example if I were to create an array of cells.

Note that I added a state for square (the superLayer) and a state for all of its subLayers (cells[]). They are completely separate states. You can do the same thing with layers you might import that have subLayers or layers that have subLayers that you added inside of Framer Studio.

for layer in layer2.subLayers
layer.states.add{(...

Josef Richter

Joshua Tucker this is probably not what I meant - I want to manually set the properties for each single layer. the thing is that one layer might change properties just in stateOne, stateSeven and stateFifteen. but you have to define all the 15 states for the layer, because you need a loop to switch all the layers to stateTwelve for example. Otherwise you'd have again to manually say which layers change in which state. Does that make sense? EDIT: after a bit of investigation, I found out I at least don't have to define empty states and use try/catch instead, which partly helps..

Jonas Treub

My example was not that clear since all tiles had the same state. Improved example: http://share.framerjs.com/ihbm8z0lrgm0/

Read the entire post on Facebook