Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Multi-Screen Flows in Framer

Multi-Screen Flows in Framer

Here's the deck from a brief talk I gave at Disney Seattle on July 9, 2015. In it, I quickly covered an approach for creating multi-screen prototypes using Framer JS, and then showed off a new module I built to help with screen-to-screen transitions.

Watch the video on YouTube:
https://www.youtube.com/watch?v=ZA9TKn_bIVY

Grab the module on GitHub:
https://github.com/chriscamargo/framer-viewNavigationController

Chris Camargo

July 09, 2015
Tweet

Other Decks in Design

Transcript

  1. Chris Camargo Sr Interaction Designer @ Disney Parks & Resorts

    Digital Roughly 12 years of experience in design (mostly at startups) Hadn’t built anything with FramerJS before working at Disney (7 months ago)
  2. superLayer myView  =  new  Layer          width:

     Screen.width          height:  Screen.height          backgroundColor:  “white”
  3. superLayer myView  =  new  Layer          width:

     Screen.width          height:  Screen.height          backgroundColor:  “white” myHeader  =  new  Layer          width:  Screen.width          height:  64          backgroundColor:  “red”
  4. superLayer myView  =  new  Layer          width:

     Screen.width          height:  Screen.height          backgroundColor:  “white” myHeader  =  new  Layer          width:  Screen.width          height:  64          backgroundColor:  “red”          superLayer:  myView
  5. states myView.states.add          pushLeft:    {x:  -­‐Screen.width}

             pushRight:  {x:  Screen.width}          center:        {x:  0}
  6. Take a Tour Next Create an account SuperNifty App Easy

    enough for a simple flow, right? Here’s why this app is rad Even more awesomeness Sign In
  7. Take a Tour Next Create an account SuperNifty App this

    app is rad awesomeness Sign In button_takeTour.on  Events.Click,  -­‐>          view_intro.states.switch  pushLeft          view_tour1.states.switch  center button_tour1_back.on  Events.Click,  -­‐>          view_intro.states.switch  center          view_tour1.states.switch  pushRight Just a few functions to handle clicks…
  8. button_takeTour.on  Events.Click,  -­‐>          view_intro.states.switch  pushLeft  

           view_tour1.states.switch  center button_tour1_back.on  Events.Click,  -­‐>          view_intro.states.switch  center          view_tour1.states.switch  pushRight button_tour2_back.on  Events.Click,  -­‐>          view_tour1.states.switch  center          view_tour2.states.switch  pushLeft button_tourNext.on  Events.Click,  -­‐>          view_tour1.states.switch  pushRight          view_tour2.states.switch  center button_tour2_createAcct.on  Events.Click,  -­‐>          view_createAcct.states.switch  center          view_tour2.states.switch  pushLeft button_tour3_back.on  Events.Click,  -­‐>          view_tour1.states.switch  center          view_tour2.states.switch  pushRight button_createAcct_facebook.on  Events.Click,  -­‐>          view_tour1.states.switch  center   …wait a minute.
  9. button_takeTour.on  Events.Click,  -­‐>          view_intro.states.switch  pushLeft  

           view_tour1.states.switch  center button_tour1_back.on  Events.Click,  -­‐>          view_intro.states.switch  center          view_tour1.states.switch  pushRight button_tour2_back.on  Events.Click,  -­‐>          view_tour1.states.switch  center          view_tour2.states.switch  pushLeft button_tourNext.on  Events.Click,  -­‐>          view_tour1.states.switch  pushRight          view_tour2.states.switch  center button_tour2_createAcct.on  Events.Click,  -­‐>          view_createAcct.states.switch  center          view_tour2.states.switch  pushLeft button_tour3_back.on  Events.Click,  -­‐>          view_tour1.states.switch  center          view_tour2.states.switch  pushRight button_createAcct_facebook.on  Events.Click,  -­‐>          view_tour1.states.switch  center   …wait a minute. This is just for 3 screens?
  10. Create Account chriscamargo •••••••• Get Started You’re all set! What

    about more complex flows? Sign Up SuperNifty App Log In Log In chriscamargo •••••••• •••••••• Open Last Project Welcome back! Take a Tour
  11. An Ideal Controller - Keeps track of which view is

    current view - Keeps track of history for Back functionality - Provides built-in transitions - Provides events for willTransition, didTransition, etc