Framer card flipping

flipcards.coffee

# Flip Cards
cards = Container.children.filter (child) ->
	child.name == "Card1"  || 
	child.name == "Card2"    ||
	child.name == "Card3" ||
	child.name == "Card4"


for card in cards		
	
	# Loop over child layers and set their initial properties					
	for child in card.children
		if child.name == "Back"
			child.rotationY = -180
			child.states.add 
				start: 
					opacity: 0
					options:
						time: 0.25
				flipped:
					opacity: 1
					options:
						time: 0.25
		else if child.name == "Front"
			child.states.add 
				start:
					opacity: 1
					options:
						time: 0.25
				flipped:
					opacity: 0
					options:
						time: 0.25
	
	# Use spring animation
	card.states.animationOptions =
		curve: Spring(tension: 5, friction: 10, velocity: 10)
	
	# Set card flipped states	
	card.states.add 
		start:
			rotationY: 0
		flipped:
			rotationY: 180	
	
	# Setup click event handling								
	card.onClick (event, layer) ->
		layer.stateCycle("flipped", "start")
		for child in layer.children
			child.stateCycle("flipped", "start")