Search code examples
prototypeframerjs

Unable to order layers in Framer Js

I am very new to Framer JS. Trying to build a simple navigation mockup. On clicking the gray button it takes you to a page 2. On page 2 on clicking the white button, it redirects you to page 1.

Here is my Framer code. For some reason, both the buttons appear on the screen and making it difficult to click. I want the buttons to be available only their respective pages. Gray button on page 1 and white button on page 2. 

homepage = new Layer
    backgroundColor: "#F8FDFF"
    width: 1440, height: 2394

uploader = new Layer
    backgroundColor: "#06476B"
    width: 1440, height: 1008

goto_hompage = new Layer
   width: 98, height: 40, x: 30, y: 0
   backgroundColor: "#ffffff"

goto_uploader = new Layer
  width: 73, height: 40, x: 25, y: 0
   backgroundColor: "#cdcdcd"

goto_hompage.on Events.Click, ->
    homepage.opacity = 1
    uploader.opacity = 0

goto_uploader.on Events.Click, ->
    uploader.opacity = 1
    homepage.opacity = 0

any help would be greatly appreciated.

Solution

  • You can add the button layers to the pages by specifying a superLayer like so:

    goto_hompage = new Layer
   width: 98, height: 40, x: 30, y: 0
   backgroundColor: "#ffffff"
   superLayer: uploader

goto_uploader = new Layer
    width: 73, height: 40, x: 25, y: 0
    backgroundColor: "#cdcdcd"
    superLayer: homepage

    Then, instead of changing the opacity, change the depth position of the pages:

    goto_hompage.on Events.Click, ->
    homepage.bringToFront()

goto_uploader.on Events.Click, ->
    uploader.bringToFront()