Transitions.coffee

###
ViewController transitions (https://github.com/awt2542/ViewController-for-Framer) ported to FlowComponent by @myvo

Usage:
Transitions = require "Transitions"

a = new Layer size: Screen.size, html: "A"
b = new Layer size: Screen.size, html: "B"
flow = new FlowComponent
flow.showNext a
a.onClick -> flow.zoomIn(b)
b.onClick -> flow.pushOutRight(a)
###

timing = 0.7
curving =  "cubic-bezier(0.2, 1, 0.2, 1)"

transitions = {}

transitions.switchInstant = (nav, layerA, layerB, overlay) ->
	transition =
		layerA:
			show:
				x:0
				y:0

			hide:
				x:0
				y:0

		layerB:
			show:
				x:0
				y:0

			hide:
				x:0
				y:0
					
transitions.slideInUp = (nav, layerA, layerB, overlay) ->
	transition =
		layerA:
			show:
				x:0
				y:0
				options:
					time: timing
					curve: curving

			hide:
				x:0
				y:0
				options:
					time: timing
					curve: curving

		layerB:
			show:
				x:0
				y:0
				options:
					time: timing
					curve: curving

			hide:
				x:0
				y:Screen.height
				options:
					time: timing
					curve: curving
				
transitions.slideInDown = (nav, layerA, layerB, overlay) ->
	transition =
		layerA:
			show:
				x:0
				y:0
				options:
					time: timing
					curve: curving

			hide:
				x:0
				y:0
				options:
					time: timing
					curve: curving

		layerB:
			show:
				x:0
				y:0
				options:
					time: timing
					curve: curving

			hide:
				x:0
				y:-Screen.height
				options:
					time: timing
					curve: curving
				
transitions.slideInLeft = (nav, layerA, layerB, overlay) ->
	transition =
		layerA:
			show:
				x:0
				y:0
				options:
					time: timing
					curve: curving

			hide:
				x:0
				y:0
				options:
					time: timing
					curve: curving

		layerB:
			show:
				x:0
				y:0
				options:
					time: timing
					curve: curving

			hide:
				x:-Screen.width
				y:0
				options:
					time: timing
					curve: curving
				
transitions.slideInRight = (nav, layerA, layerB, overlay) ->
	transition =
		layerA:
			show:
				x:0
				y:0
				options:
					time: timing
					curve: curving

			hide:
				x:0
				y:0
				options:
					time: timing
					curve: curving

		layerB:
			show:
				x:0
				y:0
				options:
					time: timing
					curve: curving

			hide:
				x:Screen.width
				y:0
				options:
					time: timing
					curve: curving
				
				

transitions.slideOutDown = (nav, layerA, layerB, overlay) ->
	transition =
		layerA:
			show:
				x:0
				y:0
				options:
					time: timing
					curve: curving

			hide:
				x:0
				y:Screen.height
				options:
					time: timing
					curve: curving

		layerB:
			show:
				x:0
				y:0
				height: Screen.height
				options:
					time: timing
					curve: curving

			hide:
				x:0
				y:0
				height:0
				options:
					time: timing
					curve: curving
				
transitions.slideOutRight = (nav, layerA, layerB, overlay) ->
		transition =
		layerA:
			show:
				x:0
				y:0
				options:
					time: timing
					curve: curving

			hide:
				x:Screen.width
				y:0
				options:
					time: timing
					curve: curving

		layerB:
			show:
				x:0
				y:0
				width:Screen.width
				options:
					time: timing
					curve: curving

			hide:
				x:0
				y:0
				width:0
				options:
					time: timing
					curve: curving
				
transitions.moveInUp = (nav, layerA, layerB, overlay) ->
	transition =
		layerA:
			show:
				x:0
				y:0
				options:
					time: timing
					curve: curving

			hide:
				x:0
				y:-Screen.height
				options:
					time: timing
					curve: curving

		layerB:
			show:
				x:0
				y:0
				options:
					time: timing
					curve: curving

			hide:
				x:0
				y:Screen.height
				options:
					time: timing
					curve: curving
				
transitions.moveInDown = (nav, layerA, layerB, overlay) ->
	transition =
		layerA:
			show:
				x:0
				y:0
				options:
					time: timing
					curve: curving

			hide:
				x:0
				y:Screen.height
				options:
					time: timing
					curve: curving

		layerB:
			show:
				x:0
				y:0
				options:
					time: timing
					curve: curving

			hide:
				x:0
				y:-Screen.height
				options:
					time: timing
					curve: curving
				
transitions.moveInLeft = (nav, layerA, layerB, overlay) ->
	transition =
		layerA:
			show:
				x:0
				y:0
				options:
					time: timing
					curve: curving

			hide:
				x:Screen.width
				y:0
				options:
					time: timing
					curve: curving

		layerB:
			show:
				x:0
				y:0
				options:
					time: timing
					curve: curving

			hide:
				x:-Screen.width
				y:0
				options:
					time: timing
					curve: curving
				
transitions.moveInRight = (nav, layerA, layerB, overlay) ->
	transition =
		layerA:
			show:
				x:0
				y:0
				options:
					time: timing
					curve: curving

			hide:
				x:-Screen.width
				y:0
				options:
					time: timing
					curve: curving

		layerB:
			show:
				x:0
				y:0
				options:
					time: timing
					curve: curving

			hide:
				x:Screen.width
				y:0
				options:
					time: timing
					curve: curving

transitions.pushInLeft = (nav, layerA, layerB, overlay) ->
	transition =
		layerA:
			show:
				x:0
				y:0
				options:
					time: timing
					curve: curving
				
			hide:
				x:Screen.width / 2
				y:0
				options:
					time: timing
					curve: curving
				

		layerB:
			show:
				x:0
				y:0
				shadowX: 0
				shadowColor: 'rgba(0,0,0,0.6)'
				options:
					time: timing
					curve: curving
				
			hide:
				x:-Screen.width
				y:0
				shadowX: Screen.width
				shadowColor: 'rgba(0,0,0,0)'
				options:
					time: timing
					curve: curving
				
				
transitions.pushInRight = (nav, layerA, layerB, overlay) ->
	transition =
		layerA:
			show:
				x:0
				y:0

			hide:
				x:-Screen.width / 2
				y:0

		layerB:
			show:
				x:0
				y:0
				shadowX: 0
				shadowColor: 'rgba(0,0,0,0.6)'

			hide:
				x:Screen.width
				y:0
				shadowX: -Screen.width
				shadowColor: 'rgba(0,0,0,0)'
				
				
transitions.pushOutRight = (nav, layerA, layerB, overlay) ->
	transition =
		layerA:
			show:
				x:0
				y:0
				options:
					time: timing
					curve: curving

			hide:
				x:Screen.width
				y:0
				options:
					time: timing
					curve: curving

		layerB:
			show:
				x:0
				y:0
				width:Screen.width
				shadowX: Screen.width
				shadowColor: 'rgba(0,0,0,0)'
				shadowType: 'inner'
				options:
					time: timing
					curve: curving

			hide:
				x:-Screen.width / 2
				y:0
				width:Screen.width/2
				shadowX: Screen.width
				shadowColor: 'rgba(0,0,0,0.6)'
				shadowType: 'inner'
				options:
					time: timing
					curve: curving
				
transitions.fadeIn = (nav, layerA, layerB, overlay) ->
	transition =
		layerB:
			show:
				x:0
				y:0
				opacity: 1
				options:
					time: timing
					curve: curving

			hide:
				x:0
				y:0
				opacity: 0
				options:
					time: timing
					curve: curving
				
transitions.zoomIn = (nav, layerA, layerB, overlay) ->
	transition =
		layerB:
			show:
				x:0
				y:0
				scale: 1
				opacity: 1
				options:
					time: timing
					curve: curving

			hide:
				x:0
				y:0
				scale: .9
				opacity: 0
				options:
					time: timing
					curve: curving
				
transitions.zoomOut = (nav, layerA, layerB, overlay) ->
	transition =
		layerB:
			show:
				x:0
				y:0
				scale: 1
				opacity: 1
				options:
					time: timing
					curve: curving

			hide:
				x:0
				y:0
				options:
					time: timing
					curve: curving
					

_.keys(transitions).forEach (transition) ->
	FlowComponent::[transition] = (layer) ->
		@transition layer, transitions[transition]