Awesome
framer-viewNavigationController
fVNC is a simple view controller for FramerJS that allows you to transition between views with just a couple lines of code.
Features
- Built-in method for transitioning between views.
- Customize the transition by choosing
up
,down
,left
, orright
transitions. - Customize the movement by providing
animationOptions
. - Automatically places back buttons in your flow at the top left of your views.
- Automatically transitions backward, using the opposite direction of your initial transition. (v1.1)
TODO
- Allow custom states for building unique screen-to-screen transitions.
- Moar documentation!
How to Get Started
Step 1: Include the module in your protoype.
{ViewNavigationController} = require "ViewNavigationController"
Step 2: Create a new view controller.
vnc = new ViewNavigationController
In this case, I've called my view controller vnc
. By default, the view controller will match the size of the device's screen. You can add width
and height
properties to modify the size of the view controller.
Step 3: Create your views and add them to the view controller.
myFirstView = new Layer
name: "initialView"
width: 750, height: 1334
image: "images/screen01.png"
parent: vnc
mySecondView = new Layer
width: 750, height: 1334
image: "images/screen02.png"
parent: vnc
To add them to the view controller, just make sure the it's their parent. You can see I've also set the name
property of myFirstView
to initialView
. This tells the view controller that I want to start with this view appearing first.
Step 4: Set up a button to change views.
myButton = new Layer
width: Screen.width
height: 88
y: 1130
parent: myFirstView
myButton.on Events.Click, ->
vnc.transition(mySecondView)
Now I can quickly create a button that causes our view controller to change views. I don't need to worry about creating a 'back' button for mySecondView
, the view controller has already done that for me. And if I add more views and create more transitions, the view controler will remember which views I've seen, and will step me back in the correct order.
Methods
fVNC comes with a few methods built-in to help you do things like transition backward, or remove the automatically created back buttons from an existing view.
back()
To move backward by one history item, simply call the back()
method.
myBackButton.on Events.Click, ->
vnc.back()
Just remember, if there's no prior view in the history stack, there's nothing to go back to, so nothing will happen.
removeBackButton(view)
To remove the back button from a view, just call removeBackButton()
and pass in the view you'd like to affect.
vnc.removeBackButton(mySecondView)
This code will prevent the back button from appearing on mySecondView
.
Feature Requests
If you'd like to see new features added to fVNC, just drop me a line on Twitter (@chriscamargo), or better yet, submit a pull request.
Changelog
v2 (Sun, May 15, 2016)
- fVNC now emits a
change:view
event to notify you when a view change happens. - fVNC now keeps track of the transition you use, so the direction is automatically reversed when using 'back'.
v3 (Fri, Oct 7, 2016)
- fVNC updated to support Framer v72.
v4 (Fri, Oct 21, 2016)
- Fixed a bug with the
removeBackButton
method. Thanks to @geligelu for finding and reporting this one.