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.
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)
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)
Set the initial view
Views = new ViewController
initialView: sketch.home
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
Returns the current view
Views = new ViewController
initialView: sketch.home
Views.slideIn(sketch.menu)
print Views.currentView # returns sketch.menu
Returns the previous view
Views = new ViewController
initialView: sketch.home
Views.slideIn(sketch.menu)
print Views.previousView # returns sketch.home
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
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
Default animation options for all transitions inside the ViewController.
Views = new ViewController
animationOptions:
time: .8
curve: "ease-in-out"
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/
Layers matching this name will automatically call .back() on click. Defaults to "backButton"
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".
Triggered when the currentView changes
Views.onChange "currentView", (current) ->
print "new view is: "+current.name
Triggered when the previousView changes
Views.onChange "previousView", (previous) ->
print "previous view is: "+previous.name
Triggered before a transition starts
Views.onViewWillSwitch (oldView, newView) ->
print oldView,newView
Triggered after a transition has finished
Views.onViewDidSwitch (oldView, newView) ->
print oldView,newView
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
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