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

What is Framer? Join the Community
Return to index
Nick Bewley
Posted Aug 27 - Read on Facebook

Context: I want to move the position of a layer (call it "image") that lies behind a layer mask (lets call it "mask").

I put the two layers into a group to import to framer. But how can I target the "image" to move it behind the "mask"? Trying something like myLayers.theGroup.theLayer doesn't seem to work.. Splitting the images up into two groups removes the mask functionality.

Thanks for any input

19 Comments

Alex Hazel

image.sendToBack() or image.placeBehind(nameOfLayer)

Alex Hazel

Also, from the framer.js documentation:
"Layers are imported as a flat list. So, to access a layer named “ChildLayer” you write “importedLayers.ChildLayer” instead of “importedLayers.ParentLayer.ChildLayer”.

Nick Bewley

Thanks Alex Hazel. Maybe I miscommunicated though. Rather than trying to send the image backwards, I want to move the image inside of the mask.. Any ideas? Thanks for your input

Alex Hazel

Did you try setting the mask as the image's superLayer and then move the layer order of the mask (superLayer) which should move its children along with it and keep the same layer order

Alex Hazel

Also, if framer doesn't do it automatically on import, you will need to set clipping to equal true on the mask layer so that the image is clipped

myMask.clip=true

Nick Bewley

Thanks a ton for the help Alex Hazel. Referencing your second comment, I have a group called "imagemask," and inside it there are two layers: "image" and "mask." Trying to select "image" via PSD.image.animate returns "TypeError: undefined is not an object." Selecting the group "imagemask" does not return the same error.. What could I be missing here?

Alex Hazel

"Imported layers are accessible by the importedLayers object: “importedLayers.myLayer”.

Group names should be unique."

imported["image"].animate
imported["mask"].animate

Koen Bok

What Alex sais. Also make sure you use the latest Sketch, as the ones before sometimes didn't export all the masked pixels.

Koen Bok

Oh and the clip gets set automatically if you have a layer mask.

Nick Bewley

Thanks for the help guys. Either I am really dense or I am missing something. I've imported the layers as "PSD." One of the layers inside a group (called for example "imagemove") is called "photo." Why does trying PSD.photo.on Events.Click, -> return 'undefined is not an object', when PSD.imagemove works fine?

Koen Bok

Get rid of the . in photo.

Nick Bewley

Okay after checking the console it appears that the two layers inside the group are being imported as a single image (ie the "imagemove" group), rather than two separate images. My understanding based on the docs is that the images inside the groups would be imported individually.. Am I mistaken here?

Nick Bewley

Haha thanks yeh there is no . in "photo" , was included for grammar. Still having the same problem as described above. Should the images inside the group be imported individually? My group is imported as a single image, which I think is the root of my problem. Thanks a lot for any ideas

Mike Feldstein

I believe groups are flattened, if you want them to be separate try creating a group out of each image, inside the other group.

Mike Feldstein

I don't know much about the importer so i could be totally wrong, but its worth a shot

Keith Lang

Perhaps worthy of a Snippet in Framer Studio?

Koen Bok

Here is an example that should help you. Make sure you use the latest Sketch beta: http://cl.ly/0N0x033Z3V2m

Nick Bewley

The Sketch example works great, thanks Koen Bok. Since I was working in Photoshop, though, I had a different environment running. Seems to be a limitation of Photoshop itself.. Since one cannot separate a clipping mask from the image into a separate group and still maintain the mask, it does not seem there is a way to accomplish this in a .psd document. Great to know, however: I'll switch my software for this task.

Nick Bewley

An example in psd: http://cl.ly/0T2Q233Z2n0s. Perhaps there is a different way to accomplish this?

Read the entire post on Facebook