All Projects → jchavarri → Framernavigationcomponent

jchavarri / Framernavigationcomponent

Licence: mit
Reusable and customizable navigation component for Framer, based on iOS

Programming Languages

javascript
184084 projects - #8 most used programming language

Navigation Component

A navigation component for Framer. It features:

  • Default transitions animations for pushing and popping views, based on iOS UINavigationController, that you can replace with your own ones.
  • Default header style and animations to show the current and previous layer, also easily customizable.
  • Default header style adapts to iPhone6+ screen size
  • Custom events are emitted before and after popping and pushing

Examples

Simple

Complex

Navigation component

Custom header

Custom header

Custom transition animation

Custom transition animation

Get started

  • Copy the navigationComponent.coffee file into your modules folder
  • Add NavigationComponent = (require "navigationComponent").NavigationComponent
  • Create the NavigationComponent: navigationComponent = new NavigationComponent rootLayer: yourFirstLayer

Simple example

	
NavigationComponent = (require "navigationComponent").NavigationComponent

createFullScreenLayer = (text, title) ->
	newLayer = new Layer
		width: Screen.width
		height: Screen.height
		html: text
		backgroundColor: Framer.Utils.randomColor()
	newLayer.title = title
	newLayer.style =
		"font-size" : "600px"
		"color" : "white"
		"line-height" : Screen.height + "px"
		"font-weight" : "bold"
		"text-align" : "center"
	return newLayer
	
firstLayer = createFullScreenLayer("1", "Settings")
firstLayer.name = "First screen"
firstLayer.backgroundColor = "white"
firstLayer.style["color"] = "orange"

navigationComponent = new NavigationComponent
	rootLayer: firstLayer

firstLayer.on Events.Click, ->
	secondLayer = createFullScreenLayer("2", "Long title screen")
	secondLayer.name = "Second screen"
	navigationComponent.push(secondLayer)

Constructor params

  • firstLayer (required) — The layer to initialize the navigation component with.
  • animationPush — A function that is called when the push animation is needed. It expects two parameters: fromLayer -the layer that is on-screen and is going to be pushed- and toLayer -the layer that will be shown-. Use these parameters to implement custom animations.
  • animationPop — You guessed it :) Same as animationPush but when popping.
  • animationTime — A custom transition time. This parameter is required when implementing custom animations.

Properties

  • navigationLayers — The array of layers that are handled by the navigation component.
  • headerLayer — The layer that is shown on top of the navigation layer. By default, this layer shows always a custom property title string that can be added to each layer on the navigation stack. This layer, when using the default style, has 3 properties: titleLayer, leftLayer and backArrow.
  • currentLayerIndex — The index of the layer that is being shown.

Functions

  • push() — Push a new layer into the navigation component.
  • pop() — Pop the latest added layer from the navigation component. NOTE: The layer popped is destroyed after being removed from the navigation component, so you might want to create a copy if you want to reuse it later.
  • popToRootLayer() — Pops to the root layer.
  • popToLayerAtIndex(index) — Pops layers until the specified index is at the top of the navigation stack

Events

  • Events.NavigationWillPush — Called before a new layer is pushed into the navigation stack. It includes an object that has the following properties: navigationLayer, currentLayer and nextLayer.
  • Events.NavigationDidPush — Called after a new layer has been pushed into the navigation stack. It includes an object that has the following properties: navigationLayer, currentLayer and nextLayer.
  • Events.NavigationWillPop — Called before a layer (or layers) are popped from the navigation stack. It includes an object that has the following properties: navigationLayer, currentLayer, nextLayer and index.
  • Events.NavigationDidPop — Called after a layer (or layers) are popped from the navigation stack. It includes an object that has the following properties: navigationLayer, currentLayer, nextLayer and index.

References

Thanks to the following creators for sharing their work:

Other references:

TODO

  • Add slide right to pop
  • Replace header layers animations for state transitions
  • Add right button action
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].