scrollComponent-and-spinner.coffee

# http://share.framerjs.com/ie30ezuuf9jd/

new BackgroundLayer
	backgroundColor: "#aaa"

spinner = new Layer
	width: 20
	height: 100
	backgroundColor: "blue"
	borderRadius: "50%"
	y: 200

spinner.centerX()

scroll = new ScrollComponent
	size: Screen.size
	scrollHorizontal: false


tabBar = new Layer
	width: Screen.width
	height: 128
	backgroundColor: "white"
	maxY: Screen.height
navBar = new Layer
	width: Screen.width
	height: 128
	backgroundColor: "white"

layers = []
for i in [0..10]
	layers[i] = new Layer
		parent: scroll.content
		width: Screen.width
		height: 300
		backgroundColor: Utils.randomColor()
		y: i * 300 + 128
		
scroll.onScroll ->
	if scroll.direction is "down"
		navBar.animate
			properties: y: -128
			time: .2
		tabBar.animate
			properties: y: Screen.height
			time: .2
			
	else
		navBar.animate
			properties: y: 0
			time: .2
		tabBar.animate
			properties: y: Screen.height - 128
			time: .2
			
	spinner.rotation = scroll.scrollY

scroll.onScrollEnd ->
	if scroll.scrollY < 0
		spinner.animate
			properties: 
				rotation: 360 * 3
		for lay, i in layers
			lay.animate
				properties:
					y: i * 300 + 128 + 256
				time: .3
			
spinner.onAnimationEnd ->
	for lay, i in layers
		lay.animate
			properties:
				y: i * 300 + 128
			time: .3