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

What is Framer? Join the Community
Return to index
Ken Miura
Posted Apr 26 - Read on Facebook

hello what's a good sample to see how to do this?
I want to "link" multiple layers together, keeping the same relative position to each other. Simple example is two layers, side by side (A &B). if I drag A, B should be dragged together. possible?

14 Comments

Marc Krenn

Sure, it's pretty easy. Just add layerB to layerA by making it its superlayer:

layerB.superlayer = layerA

Jan Basko

or layerB = new Layer({superLayer:layerA})

Ken Miura

thanks! I thought that's what superLayers did to, but when I use Layer.center() to position the first layer, the position of second one gets messed up.
Before: http://gyazo.com/c056785466107ee2f92d4fdbb650ad89
After: http://gyazo.com/c114c7a9cb6db26ecea149a34a362781

I also tried assigning a specific x,y coordinate to first layer ("Home" in the example), and same thing. Any idea? thanks :)

Ken Miura

also, I have to explicitly set "Home.clip=false" for the second layer ("One") to be visible. This wasn't entirely clear to me why, from what I had read. If you could enlighten me there, that would be great too!

Jan Basko

can you please share your project then we can easier solve your problem if we can download it and edit it :)

Ken Miura

OK, thank you! OK, so here it is. the green is draggable. I've commented out the superlayer part at the bottom, but when I enable it, the pink goes to a weird position.
http://share.framerjs.com/nwn8xkt0cg5e/

Jan Basko

yep I see that u got some weird position its because u are using in previous lines x:Home.x-viewWidth, y:Home.y and therefore you got it weird and not centered

Ken Miura

OK. I was trying to do a relative position of layers, based on the "Home" layer. What's the best way to do this? I wanted to actually position 4 separate layers around the Home layer (up,down, left, right)

Jan Basko

hmm what about to make fix width and height for home layer and then with that 4 separate just play with x y positioning ?

Marc Krenn

http://share.framerjs.com/sljhtz91rszn/

I think the easiest way to do that is to save and reload the absolute position of the layer on the screen with ".screenFrame." It's just two additional lines of codes!

"clip" has to be disabled, because otherwise the superlayer acts like an (photoshop) mask: Everything that's outside of the superlayer won't be rendered.

Ken Miura

OK, thanks for the tip! and now I understand superlayers better. Thank you, Jan an Marc :)

Jordan Robert Dobson

You can also use the
layerA.on "change:y", (event,layer) ->
layerB.y = layerA.y

Jordan Robert Dobson

The change only works on some properties. But do a search on Facebook and I'm sure you can find a few examples.

Ken Miura

you know, for the immediate purpose, this just worked. I didn't realize the subLayers coordinates automatically get set to relative position to its superlayer. I guess that's the purpose of the hierarchy with super/sub layers - you setup a local coordinate system. Now that I know, all I need to do is assign the relative coordinates, based on "Home" the superLayer, and that was it!
http://share.framerjs.com/48alby7k5ely/

Read the entire post on Facebook