Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/chriscamargo/framer-viewNavigationController
A simple controller for FramerJS that allows you to transition between views with just a couple lines of code.
https://github.com/chriscamargo/framer-viewNavigationController
Last synced: 2 months ago
JSON representation
A simple controller for FramerJS that allows you to transition between views with just a couple lines of code.
- Host: GitHub
- URL: https://github.com/chriscamargo/framer-viewNavigationController
- Owner: chriscamargo
- License: mit
- Created: 2015-07-10T17:50:25.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2016-10-27T18:04:39.000Z (about 8 years ago)
- Last Synced: 2024-08-04T00:10:16.951Z (6 months ago)
- Language: CoffeeScript
- Size: 4.07 MB
- Stars: 216
- Watchers: 22
- Forks: 19
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-framer - framer-viewNavigationController - Simple controller for FramerJS that allows you to transition between views with just a couple lines of code. (Modules)
README
# framer-viewNavigationController
fVNC is a simple view controller for FramerJS that allows you to transition between views with just a couple lines of code.
## Features
- Built-in method for transitioning between views.
- Customize the transition by choosing `up`, `down`, `left`, or `right` transitions.
- Customize the movement by providing `animationOptions`.
- Automatically places back buttons in your flow at the top left of your views.
- Automatically transitions backward, using the opposite direction of your initial transition. (v1.1)
#### TODO
- Allow custom states for building unique screen-to-screen transitions.
- Moar documentation!
## How to Get Started
**Step 1:** Include the module in your protoype.
```coffeescript
{ViewNavigationController} = require "ViewNavigationController"
```
**Step 2:** Create a new view controller.
```coffeescript
vnc = new ViewNavigationController
```
In this case, I've called my view controller `vnc`. By default, the view controller will match the size of the device's screen. You can add `width` and `height` properties to modify the size of the view controller.
**Step 3:** Create your views and add them to the view controller.
```coffeescript
myFirstView = new Layer
name: "initialView"
width: 750, height: 1334
image: "images/screen01.png"
parent: vnc
mySecondView = new Layer
width: 750, height: 1334
image: "images/screen02.png"
parent: vnc
```
To add them to the view controller, just make sure the it's their parent. You can see I've also set the `name` property of `myFirstView` to `initialView`. This tells the view controller that I want to start with this view appearing first.
**Step 4:** Set up a button to change views.
```coffeescript
myButton = new Layer
width: Screen.width
height: 88
y: 1130
parent: myFirstView
myButton.on Events.Click, ->
vnc.transition(mySecondView)
```
Now I can quickly create a button that causes our view controller to change views. I don't need to worry about creating a 'back' button for `mySecondView`, the view controller has already done that for me. And if I add more views and create more transitions, the view controler will remember which views I've seen, and will step me back in the correct order.
## Methods
fVNC comes with a few methods built-in to help you do things like transition backward, or remove the automatically created back buttons from an existing view.
#### back()
To move backward by one history item, simply call the `back()` method.
```coffeescript
myBackButton.on Events.Click, ->
vnc.back()
```
Just remember, if there's no prior view in the history stack, there's nothing to go back to, so nothing will happen.
#### removeBackButton(view)
To remove the back button from a view, just call `removeBackButton()` and pass in the view you'd like to affect.
```coffeescript
vnc.removeBackButton(mySecondView)
```
This code will prevent the back button from appearing on `mySecondView`.
## Feature Requests
If you'd like to see new features added to fVNC, just drop me a line on Twitter ([@chriscamargo](http://www.twitter.com/chriscamargo)), or better yet, submit a pull request.
## Changelog
##### v2 (Sun, May 15, 2016)
- fVNC now emits a `change:view` event to notify you when a view change happens.
- fVNC now keeps track of the transition you use, so the direction is automatically reversed when using 'back'.
##### v3 (Fri, Oct 7, 2016)
- fVNC updated to support Framer v72.
##### v4 (Fri, Oct 21, 2016)
- Fixed a bug with the `removeBackButton` method. Thanks to @geligelu for finding and reporting this one.