Back and Forth Pizza Animation With SimpleLayer

pizza-anim.coffee

require("./Framer")


containerLayer = new Layer
  width: Screen.width
  height: Screen.height
  backgroundColor: "black"

layer1 = new Layer
  image: "http://www.pizzeriatrapanese.it/wp-content/uploads/2015/03/pizza-1.jpg"
  width: Screen.width
  height: Screen.height
  backgroundColor: "#00a0dc"
  superLayer: containerLayer

layer1.center()


layer2 = new Layer
  image: "http://www.pizzeriatrapanese.it/wp-content/uploads/2015/03/pizza.jpg"
  width: Screen.width
  height: Screen.height
  scale: 0
  backgroundColor: "#001f2d"
  superLayer: containerLayer

layer2.center()

layer2.sendToBack()

backLayer = layer2
frontLayer = layer1

containerLayer.animating = false

finalAnimation = ->

animateUp = ->
  containerLayer.animating = true
  backLayerAnimation = backLayer.animate
    properties:
      scale: 0.8
      y: Screen.height / 2

    time: 0.5


  frontLayerAnimation = frontLayer.animate
    properties:
      scale: 0.5
      y: -(frontLayer.height / 3)

    time: 0.5

  frontLayerAnimation.on "end", ->
    frontLayer.sendToBack()
    frontLayer.animate
      properties:
        y: frontLayer.y + 200
      time: 0.5

  backLayerAnimation.on "end", ->
    # frontLayer.sendToBack()
    # frontLayer.animate
    #   properties:
    #     y: frontLayer.y + frontLayer.height
    #     scale: 0.5

    animateBackLayerToFront = backLayer.animate
      properties:
        scale: 1
        x: 0
        y: 0
      time: 0.5

    animateBackLayerToFront.on "end", ->
      console.log "animateBackLayerToFront ended"
      containerLayer.animating = false
      console.log "containerLayer.animating: #{containerLayer.animating}"
      temp = backLayer
      backLayer = frontLayer
      frontLayer = temp

animateDown = ->
  containerLayer.animating = true
  frontLayer.animate
    properties:
      scale: 0.5
      y: Screen.height / 2
    time: 0.5

  backLayerAnimation = backLayer.animate
    properties:
      scale: 0.8
      y: -(backLayer.height / 3)
    time: 0.5

  backLayerAnimation.on "end", ->
    frontLayer.sendToBack()
    frontLayer.animate
      properties:
        y: frontLayer.y - frontLayer.height
      time: 0.5

    animateBackLayerToFront = backLayer.animate
      properties:
        scale: 1
        x: 0
        y: 0
      time: 0.5

    animateBackLayerToFront.on "end", ->
      containerLayer.animating = false
      temp = backLayer
      backLayer = frontLayer
      frontLayer = temp


onMouseWheel = (e)->
  console.log "#{e.deltaY}, containerLayer.animating: #{containerLayer.animating}"
  if e.deltaY > 20 and not containerLayer.animating
    console.log "animating up"
    animateUp()

  if e.deltaY < -20 and not containerLayer.animating
    console.log "animating down"
    animateDown()


containerLayer.on "wheel", (e)->
  onMouseWheel(e)