Framer Circle Demo

bg = new BackgroundLayer backgroundColor: "#EFEFEF"


radiusLength = 200
centerPoint = (200 - radius)/2

centerCircle = new Layer
	width: 200
	height: 200
	backgroundColor: "#616161"
	borderRadius: 100

centerCircle.center()
centerCircle.clip = false


radius = 60
centerPoint = (200 - radius)/2
allCircles = []
numCircles = 8

for i in [1..numCircles]
	positions = 360 / numCircles
	angle = positions * i

	adjSide = Math.cos(angle * Math.PI/180)*radiusLength
	oppSide = Math.sin(angle * Math.PI/180)*radiusLength
	adjSide = Utils.round(adjSide, 1)
	oppSide = Utils.round(oppSide, 1)

	circle = new Layer
		x: centerPoint
		y: centerPoint
		superLayer: centerCircle
		width:radius
		backgroundColor: "#9F9F9F"
		height: radius
		opacity: 1
		borderRadius: radius/2

	circle.states.add({
		out: {y: oppSide+(radius/2), x:adjSide+(radius/2)}
	})

	circle.states.animationOptions = {
		curve: "spring(300,20,0)"
		delay: 0.1 * i
	}

	allCircles.push circle #add cirlce to an array

centerCircle.on Events.Click, ->

	for i, j of allCircles
		j.states.next()