Day14 Material Register

backgroundA = new BackgroundLayer
 backgroundColor: “rgba(0,255,195,1)”

form = new Layer
 x: 119
 y: 83
 width: 336
 height: 446
 backgroundColor: “rgba(255,255,255,1)”
 borderRadius: 14
 clip: yes
 
dummyForm = new Layer
 borderRadius: 100
 width: 124
 height: 124
 backgroundColor: “rgba(255,0,70,1)”
 superLayer: form
 y: 58
 x: 274

register = new Layer
 x: 393
 y: 141
 borderRadius: 100
 width: 124
 height: 124
 backgroundColor: “rgba(255,0,70,1)”
 
 
toggleWrapper = new Layer
 x: 371
 y: 188
 width: 100
 height: 30
 backgroundColor: “transparent”

line1 = new Layer
 superLayer: toggleWrapper
 width: 3
 height: 30
 backgroundColor: “rgba(255,255,255,1)”
 maxX: toggleWrapper.width — 15

line2 = new Layer
 superLayer: toggleWrapper
 width: 3
 height: 30
 backgroundColor: “rgba(255,255,255,1)”
 rotation: 90
 maxX: toggleWrapper.width — 15
# line2.centerY()

line1 = new Layer
 superLayer: toggleWrapper
 width: 3
 height: 30
 backgroundColor: “rgba(255,255,255,1)”
 maxX: toggleWrapper.width — 15

line2 = new Layer
 superLayer: toggleWrapper
 width: 3
 height: 30
 backgroundColor: “rgba(255,255,255,1)”
 rotation: 90
 maxX: toggleWrapper.width — 15
# line2.centerY()

formName = new Layer
 x: 145
 y: 185
 height: 65
 width: 199
 html: “Login”
 color: “rgba(255,0,70,1)”
 style: 
 fontSize: “36px”
 backgroundColor: “transparent”

formName.states.add
 register:
 html: “Register”
 color: “white”

toggleWrapper.states.animationOptions = time: 0.2
dummyForm.states.animationOptions = time: 0.2
register.states.animationOptions = time: 0.2
formName.states.animationOptions = time: 0

toggleWrapper.states.add
 stateA:
 x: 378
 y: 162
 rotation: 135

toggleWrapper.onClick (event, layer) ->
 toggleWrapper.states.next()
 register.states.next()
 dummyForm.states.next()
 formName.states.next()

register.states.add
 stateA:
 x: 225
 y: 141
 opacity: 0

dummyForm.states.add
 stateA:
 borderRadius: 0
 x: -62
 width: 460
 y: -32
 height: 510
 opacity: 1

lol