Multi step user flows in Framer.js
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
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)
| Transition | Demo
| ------------- |-------------| | .switchInstant() || | .slideInUp() || | .slideInRight() || | .slideInDown() || | .slideInLeft() || | .slideOutUp() || | .slideOutRight() || | .slideOutDown() || | .slideOutLeft() || | .moveInRight() || | .moveInLeft() || | .moveInUp() || | .moveInDown() || | .pushInRight() || | .pushInLeft() || | .pushOutRight() || | .pushOutLeft() || | .fadeIn() || | .zoomIn() || | .zoomOut() ||
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.
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.
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