The Second Way for https://medium.com/@alekcz/unicorn-express-two-ways-of-getting-started-with-framer-studio-f94c9f7d9d01

TheSecondWay.coffee

# The Second Way
W = Framer.Device.screen.width
H = Framer.Device.screen.height
offset = 160
layerA = new Layer
	backgroundColor: "#fff"
	height: 120
	width: 120
	borderRadius: 20
	opacity: 0
	x: W/4 - offset
	y: H/2 -30

layerB = new Layer
	backgroundColor: "#fff"
	height: 120
	width: 120
	borderRadius: 20
	opacity: 0
	x: W * (2/4) - offset
	y: H/2 -30

layerC = new Layer
	backgroundColor: "#fff"
	height: 120
	width: 120
	borderRadius: 20
	opacity: 0
	x: W * (3/4) - offset
	y: H/2 -30
	
layerD = new Layer
	backgroundColor: "#fff"
	height: 120
	width: 120
	borderRadius: 20
	opacity: 0	
	x: W * (4/4) - offset
	y: H/2 -30

login = new Layer
	html: 'Enter your passcode'
	backgroundColor: null
	style: 
		color: "#fff"
		textAlign: 'center'
		fontSize: '60px'
		fontWeight: 200
	height: 60
	width: W
	opacity: 0
	y: H/2 + 350

sketch.ContinueButton.onClick (event, layer) ->
	layerA.animate
		opacity: 1
		options:
			delay: 1
			time: 1
			curve: 'ease'
			
	layerB.animate
		opacity: 1
		options:
			delay: 1.2
			time: 1
			curve: 'ease'
			
	layerC.animate
		opacity: 1
		options:
			delay: 1.4
			time: 1
			curve: 'ease'
			
	layerD.animate
		opacity: 1
		options:
			delay: 1.6
			time: 1
			curve: 'ease'
	
	login.animate
		opacity: 1
		options:
			delay: 2.2
			time: 1
			curve: 'ease'
	
	layerA.animate 
		borderColor: '#00AEEF'
		borderWidth: 3
		options:
			delay: 3.2
			time: 0.1
			curve: 'ease'

	layerB.animate 
		backgroundColor: 'rgba(255,255,255,0.3)'
		borderColor: '#fff'
		borderWidth: 3
		options:
			delay: 3.2
			time: 1
			curve: 'ease'
	layerC.animate
		backgroundColor: 'rgba(255,255,255,0.3)'
		borderColor: '#fff'
		borderWidth: 3
		options:
			delay: 3.7
			time: 1
			curve: 'ease'
	layerD.animate
		backgroundColor: 'rgba(255,255,255,0.3)'
		borderColor: '#fff'
		borderWidth: 3
		options:
			delay: 4.2
			time: 1
			curve: 'ease'