Simple Navigation Component for FramerJS

main.coffee

# Create background layer
bg = new BackgroundLayer
bg.center()
bg.bringToFront()

# setup navigation paging
pager = new Paging(bg)

# create pages (make initially invisible)
welcome_page = new Layer
	name: "pg_welcome"	
	visible: false
	
# ...

# push root page
pager.push_page(welcome_page,false) # (no animation)

# ...

# navigate
any_button.onClick ->
	pager.push_page(next_page) # (animated by default)

any_button.onClick ->
	pager.pop_page() # (animated by default)

Paging.coffee

# simple navigation componenent like on iOS
# put at the top of your file

class Paging
	
	pages = Array()
	
	constructor: (@bg_layer) ->		
		
	# push a new page on top 	
	push_page: (ct, animated=true) -> 
		new_page = new Layer
			parent: @bg_layer
		width: @bg_layer.width
			height: @bg_layer.height
			visible: false
			
		new_page.center()	
		
		ct.parent = new_page
		ct.width = @bg_layer.width
		ct.height = @bg_layer.height
		ct.center()		
		ct.children.forEach (it) ->
			it.center()
		
		# hide current page
		if pages.last > 0
			page.last.visible = false
			page.last.children.each (it) ->
				it.visible = false
				
		# show new page 
		pages.push(new_page)
		ct.visible = true
		
		if animated
			new_page.scale = 0.8
			new_page.opacity = 0.5
			new_page.visible = true
			new_page.animate
				curve: "spring(200, 30, 20)"
				properties: 
					scale: 1.0
					opacity: 1.0
		else
			new_page.visible = true
		
	# remove top page (navigate back)
	pop_page: (animated=true) ->				
		
		if pages.length > 0
			last_page = pages[-1..][0]
				
			if animated
				last_page.animate
					curve: "spring(300, 30, 20)"
					properties: 
						scale: 0.5
						opacity: 0.0
				
				last_page.onAnimationStop ->
					last_page.visible = false
			else
				last_page.visible = false
		
		pages.pop()
		
		if pages.length > 0
			pages[-1..][0].visible = true