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

What is Framer? Join the Community
Return to index
Ahmad Shadeed
Posted Jul 06 - Read on Facebook

In the following code, I'm trying to place a photo above an overlay layer when the user taps it. But there is an issue because the photo is still behind the overlay. The correct result is that the photo should be above the overlay.

---------------------------------

myLayers = Framer.Importer.load("imported/product_details")

overlay = new Layer({x:0, y:0, width:338, height:600})
overlay.style.backgroundColor = "black"
overlay.visible = false
myLayers["photo"].bringToFront()

myLayers["photo"].on("click",function () {
overlay.visible = true
overlay.opacity = 0.8
myLayers["photo"].placeBefore(overlay)
myLayers["photo"].scale = 1.5
myLayers["photo"].y = 100
})

---------------------------------

Any help please?

7 Comments

Ahmed Alstaty

I think using Sub-Layers is useful in this case, try to put your image inside a sub layer for the parent layer ,,
This is just an expectation , I don't know how to program using framer JS :P

Benjamin Den Boer

Have you tried manually setting index values on both the photo and the overlay layer?

Ahmad Shadeed

Benjamin Den Boer Yes, the same result. Please check your inbox

Andreas Wahlström

Make sure your overlay layer has the same superlayer (parent) as the one from your export. If you've used an artboard in Sketch it will have that as its superlayer, which is easily missed. Fix this by adding overlay.superLayer = myLayers["photo"].superLayer

Benjamin Den Boer

Ahmad Shadeed Sent back a working fix to you! :) I see that you've named your base layer "13" and I've set the superLayer of both the Overlay and the Photo to this layer, and then I've set the index values manually, which places the photo above the overlay.

Benjamin Den Boer

The only downside is that you need to manually reset the Y value of the photo, however, an alternative could be to also create the overlay in Sketch so that both layers have the same superLayer by default. Then, you could hide the overlay and show it on click.

Benjamin Den Boer

Also, using this notation might save you some time:
myLayers.photo
(instead of)
myLayers["photo"]

Read the entire post on Facebook