iOS Lockscreen Framer

# sketch import
$ = Framer.Importer.load("imported/Tobi@2x", scale: 1)
#var
counter = 1


#anzeige code / clipboard
eq = new TextLayer
    fontFamily: "Roboto"
    fontWeight: 400
    fontSize: 12
    height: 21
    lineHeight: 1
    text: "0"
    textAlign: "center"
    color: "#fff"
    x: 213
    width: 80
    y: 8

#feedback
pinWrap = new Layer
        height: 0
genratePins = ->
    pins = []
    for i in [0...counter]
        pin = new Layer
            borderRadius: 100
            y: 141
            x:  114 +44 * i
            borderRadius: 100
            backgroundColor: "#fff"
            opacity: 1
            width: 14
            height: 14
            parent: pinWrap
        pins.push(pin)
#wiggle animation
shakeR1 = new Animation pinWrap,
    x: -4
    options:
        time: 0.1
shakeL1 = new Animation pinWrap,
    x: +4
    options:
        time: 0.1
shakeR2 = new Animation pinWrap,
    x: -4
    options:
        time: 0.1
shakeL2 = shakeR1.reverse()
#animations-loop
shakeR1.onAnimationEnd ->
    shakeL1.start()
shakeL1.onAnimationEnd ->
    shakeR2.start()
shakeR2.onAnimationEnd ->
    shakeL2.start()
shakeL2.onAnimationEnd ->
#array leeren
    pinWrap.destroy()
    pinWrap = new Layer
        height: 0

#interaktionen
$.no1.onTap ->
    genratePins()
    eq.text = eq.text + "1"
    counter = counter+ 1
    if counter > 4
        eq.text = 0
        counter = 1
        shakeR1.start()
$.no2.onTap ->
    genratePins()
    eq.text = eq.text + "2"
    counter = counter+ 1
    if counter > 4
        eq.text = 0
        counter = 1
        shakeR1.start()
$.no3.onTap ->
    genratePins()
    eq.text = eq.text + "3"
    counter = counter+ 1
    if counter > 4
        eq.text = 0
        counter = 1
        shakeR1.start()
$.no4.onTap ->
    genratePins()
    eq.text = eq.text + "4"
    counter = counter+ 1
    if counter > 4 && eq.text != "01234"
        eq.text = 0
        counter = 1
        shakeR1.start()
#unlock; hier pin ändern
    if counter > 4 && eq.text == "01234"
        pinWrap.animate
            opacity: 0
            options:
                time: 0.3
        pinWrap = new Layer
            height: 0
        eq.text = 0
        counter = 1
        $.lockscreen.animate
            y: -667
            options:
                delay: 0.5
                time: 0.35
$.no5.onTap ->
    genratePins()
    eq.text = eq.text + "5"
    counter = counter+ 1
    if counter > 4
        eq.text = 0
        counter = 1
        shakeR1.start()
$.no6.onTap ->
    genratePins()
    eq.text = eq.text + "6"
    counter = counter+ 1
    if counter > 4
        eq.text = 0
        counter = 1
        shakeR1.start()
$.no7.onTap ->
    genratePins()
    eq.text = eq.text + "7"
    counter = counter+ 1
    if counter > 4
        eq.text = 0
        counter = 1
        shakeR1.start()
$.no8.onTap ->
    genratePins()
    eq.text = eq.text + "8"
    counter = counter+ 1
    if counter > 4
        eq.text = 0
        counter = 1
        shakeR1.start()
$.no9.onTap ->
    genratePins()
    eq.text = eq.text + "9"
    counter = counter+ 1
    if counter > 4
        eq.text = 0
        counter = 1
        shakeR1.start()
$.no0.onTap ->
    genratePins()
    eq.text = eq.text + "0"
    counter = counter+ 1
    if counter > 4
        eq.text = 0
        counter = 1
        shakeR1.start()

#unlocked
$.Home.x = 0
$.lock.onTap ->
    $.lockscreen.animate
        y: 0
        options:
            time: 0.35
#cancel
$.Cancel.onTap ->
    pinWrap.destroy()
    eq.text = 0
    counter = 1
#pin: 1234
#wiggle-animation geht nur beim ersten mal, da Framer nicht checkt, dass der gelöschte layer wiederhergestellt wird 🤷🏻‍♂️
#freuen uns auf den sixer bier! 🍻