Testing Framer 3

app.js

base = new Layer({width:640, height:1136})
settingsButton = new Layer({width:60, height: 60})
waggleButton = new Layer({width: 60, height: 60})
cancelButton = new Layer({width: 60, height: 60})
waggleButton.superLayer = base
settingsButton.superLayer = base
waggleButton.maxX = 640
cancelButton.opacity = 0
cancelButton.maxX = 590
settings = new Layer({width:640, height: 1136})
settings.maxX = 0

sendButton = new Layer({width: 320, height: 100, y:100})
receiveButton = new Layer({width: 320, height: 100, y:100})
receiveButton.maxX = 640

transactionsModule = new Layer({width: 540, height:540, y:300, midX: 320})
sendModule = new Layer({width: 640, height: 936, y: 200, midX: 320, opacity: 0})


sendModule.style = {
  "background-color": "green"
}

sendButton.style = {
  "background-color": "green"
}

receiveButton.style = {
  "background-color": "red"
}

// sliding menu

settingsButton.on(Events.Click, function() {
    settings.animate({
    properties: { maxX:480 },
    time: 0.25
  })

cancelButton.animate({
    properties: {opacity: 1},
    time: 0
  })
})

cancelButton.on(Events.Click, function() {
    settings.animate({
    properties: {maxX : 0},
    time: 0.25
  })

    cancelButton.animate({
    properties: {opacity: 0},
    time: 0
  })
})


// send module

closeButton = new Layer({width: 60, height: 60})

closeButton.superLayer = sendModule
closeButton.maxX = 640


sendModule.states.add({
    visible: {opacity: 1},
    hidden:  {opacity: 0}
})

sendModule.states.animationOptions = {
  time: .25
}

sendButton.on(Events.Click, function(event) {
    sendModule.states.next("visible", "hidden")
})


closeButton.on(Events.Click, function(event) {
  sendModule.animate({
    properties: {opacity: 0},
    time: 0.25
  })
})