Awesome
ViewController-for-Framer
The ViewController module for Framer.js helps you create multi step user flows with pre-made transitions like "fade in", "zoom in" and "slide in". It consists of a Framer module and an optional Sketch plugin. Check out the intro article on Medium.
<a name="gettingstarted"> </a>Getting started
The ViewController module makes it easy to create larger UI flows inside Framer. To get started, download the ViewController.coffee file and put inside your project's modules folder. Then follow these steps:
Step 1 Create a new ViewController
ViewController = require 'ViewController'
Views = new ViewController
initialView: sketch.home
Step 2 Call one of the supported transitions to switch view or use the Sketch plugin to generate links.
sketch.home.onClick -> Views.slideInLeft(sketch.menu)
<a name="transitions"> </a>Available transitions
Transitions are trigged by using one of the transition methods. Eg. Views.fadeIn(anotherLayer)
. Each transition accepts an animationOption object as the second argument. Eg. Views.fadeIn(anotherLayer, time: 2)
Transition | Demo |
---|---|
.switchInstant() | ![]() |
.slideInUp() | ![]() |
.slideInRight() | ![]() |
.slideInDown() | ![]() |
.slideInLeft() | ![]() |
.slideOutUp() | ![]() |
.slideOutRight() | ![]() |
.slideOutDown() | ![]() |
.slideOutLeft() | ![]() |
.moveInRight() | ![]() |
.moveInLeft() | ![]() |
.moveInUp() | |
.moveInDown() | |
.pushInRight() | ![]() |
.pushInLeft() | ![]() |
.pushOutRight() | ![]() |
.pushOutLeft() | ![]() |
.fadeIn() | ![]() |
.zoomIn() | ![]() |
.zoomOut() | ![]() |
Properties and methods
.initialView
Set the initial view
Views = new ViewController
initialView: sketch.home
.initialViewName
Set the initial view based on a layer name. In the following example, the layer named "initialView" will automatically be set as the initialView.
Views = new ViewController
initialViewName: "initialView" # default value
.currentView
Returns the current view
Views = new ViewController
initialView: sketch.home
Views.slideIn(sketch.menu)
print Views.currentView # returns sketch.menu
.previousView
Returns the previous view
Views = new ViewController
initialView: sketch.home
Views.slideIn(sketch.menu)
print Views.previousView # returns sketch.home
.history
Returns the full history of the ViewController in an array
Views = new ViewController
initialView: sketch.home
Views.slideIn(sketch.menu)
Views.slideIn(sketch.profile)
print Views.history
.back()
Go back one step in history and reverse the animation.
Views = new ViewController
initialView: sketch.home
Views.slideIn(sketch.menu)
sketch.btn.onClick -> Views.back() # animates back to sketch.home
.animationOptions
Default animation options for all transitions inside the ViewController.
Views = new ViewController
animationOptions:
time: .8
curve: "ease-in-out"
<a name="autolink"> </a> .autoLink
automatically create onClick-links based on layer names according to the format: transitionName_viewName. For example, renaming the "home" layer inside Sketch to slideInRight_menu would be equivalent to the following code:
sketch.home.onClick -> Views.slideInRight(menu)
To get started, just create a new ViewController and import a Sketch file with properly named layers. autoLink is "true" by default.
See available transitions and the separate sketch plugin that helps you with renaming your layers.
Example project: http://share.framerjs.com/owauo3t6i7al/
.backButtonName
Layers matching this name will automatically call .back() on click. Defaults to "backButton"
.scroll (experimental)
Automatically adds scroll components to each view. If a view is larger than the ViewController, it will automatically enable scrollHorizontal and/or scrollVertical. Defaults to "false".
Events
change:currentView
Triggered when the currentView changes
Views.onChange "currentView", (current) ->
print "new view is: "+current.name
change:previousView
Triggered when the previousView changes
Views.onChange "previousView", (previous) ->
print "previous view is: "+previous.name
ViewWillSwitch
Triggered before a transition starts
Views.onViewWillSwitch (oldView, newView) ->
print oldView,newView
ViewDidSwitch
Triggered after a transition has finished
Views.onViewDidSwitch (oldView, newView) ->
print oldView,newView
<a name="sketch"> </a> Sketch plugin
If you have autoLink enabled in your ViewController (enabled by default) you can create links by renaming your layers according to the format: transitionName_viewName. This plugin makes renaming layers slightly more convenient.
- Select two layers, one button and one view (eg. an artboard)
- Run the plugin and choose one of the available transitions
- Import the changes to Framer
- Set up a ViewController in your project according to the Getting Started guide
Get the plugin here: https://github.com/awt2542/ViewController-for-Framer/archive/master.zip
Example prototypes
Thanks to Chris for the original inspiration for this module and to Stephen, Jordan, Jason, Koen, Fran & Marc for early feedback. Also thanks to Invision for the excellent UI kit used in the examples: Do UI kit