jchavarri / Framernavigationcomponent
Licence: mit
Reusable and customizable navigation component for Framer, based on iOS
Stars: ✭ 28
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
Custom header
Custom transition animation
Get started
- Copy the
navigationComponent.coffee
file into yourmodules
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- andtoLayer
-the layer that will be shown-. Use these parameters to implement custom animations. -
animationPop
— You guessed it :) Same asanimationPush
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 propertytitle
string that can be added to each layer on the navigation stack. This layer, when using the default style, has 3 properties:titleLayer
,leftLayer
andbackArrow
. -
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
andnextLayer
. -
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
andnextLayer
. -
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
andindex
. -
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
andindex
.
References
Thanks to the following creators for sharing their work:
- framer-viewNavigationComponent by Chris Camargo
- Cloning the UI of iOS 7 with HTML, CSS and JavaScript by Côme Courteault
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].