Diego's frame.js cofeescript

framer_cofeescript

# Set background
bg = new BackgroundLayer backgroundColor: "#f5f5f5"
bg.sendToBack()

# Variables
favIn = true
checkIn = true
collapsed = true


pinA = new Layer
    width: 88
    height: 88
    backgroundColor: "#4A4A4A"
    borderRadius: 44
    x:400
    y: 800

pinB = new Layer
    width: 88
    height: 88
    backgroundColor: "#4A4A4A"
    borderRadius: 44
    x: 600
    y: 1300

btToogle = new Layer
    width: 144
    height: 144
    backgroundColor: "#4A4A4A"
    borderRadius: 8
    x: 914
    y: 264

btToogle.shadowY = 4
btToogle.shadowBlur = 4
btToogle.shadowSpread = 1
btToogle.shadowColor = "rgba(0,0,0,0.2)"

searchField = new Layer
    width: 868
    height: 144
    backgroundColor: "#fff"
    borderRadius: 8
    x: 24
    y: 264
    originY: 0

searchField.shadowY = 4
searchField.shadowBlur = 4
searchField.shadowSpread = 1
searchField.shadowColor = "rgba(0,0,0,0.2)"

check = new Layer
    width: 54
    height: 54
    backgroundColor: "#459C19"
    borderRadius: 27
    opacity: 0
    scale: 0
    x: 1004
    y: 156

itemA = new Layer
    width: 1080
    height: 168
    backgroundColor: "#fff"
    clip: false
    y:1880
    superLayer: design.screen

itemA.index = 1

itemB = new Layer
    width: 1080
    height: 168
    backgroundColor: "#FF9900"
    clip: false
    y:1880
    superLayer: design.screen

itemB.index = 1

feedback = new Layer
    width: 102
    height: 102
    backgroundColor: "#44CEA3"
    borderRadius: 51
    opacity: 0
    x: 46
    superLayer: itemA

iconFav = new Layer
    width: 102
    height: 102
    backgroundColor: "#CCC"
    borderRadius: 51
    x: 46
    y: 32
    superLayer: itemA

# Interaction
pinA.on Events.TouchStart, ->
    itemA.animate
        properties:
            y:1608
        curve: "spring(400,50,25)"

    itemB.animate
        properties:
            y:1880
        curve: "spring(400,50,25)"

pinB.on Events.TouchStart, ->
        itemA.animate
            properties:
                y:1880
            curve: "spring(400,50,25)"

        itemB.animate
            properties:
                y:1608
            curve: "spring(400,50,25)"

btToogle.on Events.TouchStart, ->

    if collapsed == true
        searchField.animate
            properties:
                height: 288
            curve: "spring(400,25,0)"
        collapsed = false
    else
        searchField.animate
            properties:
                height: 144
            curve: "spring(400,25,0)" 
        collapsed = true

iconFav.on Events.TouchStart, ->

    if checkIn == true
        check.animate
            properties:
                opacity: 1
                scale: 1
            curve: "spring(400,25,50)"
        checkIn = false

    else
        check.animate
            properties:
                opacity: 0
                scale: 0
            curve: "spring(400,25,0)"
        checkIn = true

    if favIn == true
        feedback.backgroundColor = "#459C19"
        iconFav.backgroundColor = "#459C19"
        favIn = false
    else
        feedback.backgroundColor = "#CE0B24"
        iconFav.backgroundColor = "#ccc"
        favIn = true

    feedback.animate
        properties:
            opacity: 1
        curve: "spring(400,25,0)"
    feedback.y = 0

iconFav.on Events.TouchEnd, ->

        feedback.animate
            properties:
                opacity: 0
                y: -400
            curve: "spring(80,25,0)"