ViewController for Framer Sketch Plugin

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.

Try the demo protoype

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)

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"

.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

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.

1. Select two layers, one button and one view (eg. an artboard)
2. Run the plugin and choose one of the available transitions
3. Import the changes to Framer
4. 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

• Basic example
• autoLink example

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