Need help with ViewController-for-Framer?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

426 Stars 37 Forks 80 Commits 9 Opened issues


Multi step user flows in Framer.js

Services available


Need anything else?

Contributors list

# 444,667
41 commits
# 1,584
1 commit


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 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(

Available transitions

Transitions are trigged by using one of the transition methods. Eg.

. Each transition accepts an animationOption object as the second argument. Eg.
Views.fadeIn(anotherLayer, time: 2)

| Transition | Demo
| ------------- |-------------| | .switchInstant() |fadeIn| | .slideInUp() |fadeIn| | .slideInRight() |fadeIn| | .slideInDown() |fadeIn| | .slideInLeft() |fadeIn| | .slideOutUp() |fadeIn| | .slideOutRight() |fadeIn| | .slideOutDown() |fadeIn| | .slideOutLeft() |fadeIn| | .moveInRight() |fadeIn| | .moveInLeft() |fadeIn| | .moveInUp() || | .moveInDown() || | .pushInRight() |fadeIn| | .pushInLeft() |fadeIn| | .pushOutRight() |fadeIn| | .pushOutLeft() |fadeIn| | .fadeIn() |fadeIn| | .zoomIn() |fadeIn| | .zoomOut() |fadeIn|

Properties and methods


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
print Views.currentView # returns


Returns the previous view

Views = new ViewController
    initialView: sketch.home
print Views.previousView # returns sketch.home


Returns the full history of the ViewController in an array

Views = new ViewController
    initialView: sketch.home
print Views.history


Go back one step in history and reverse the animation.

Views = new ViewController
    initialView: sketch.home
sketch.btn.onClick -> Views.back() # animates back to sketch.home


Default animation options for all transitions inside the ViewController.

Views = new ViewController
        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:


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".



Triggered when the currentView changes

Views.onChange "currentView", (current) -> 
    print "new view is: "


Triggered when the previousView changes

Views.onChange "previousView", (previous) -> 
    print "previous view is: "


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

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:

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

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.