{"id":13714921,"url":"https://github.com/chriscamargo/framer-viewNavigationController","last_synced_at":"2025-05-07T03:31:00.452Z","repository":{"id":201745849,"uuid":"38894107","full_name":"chriscamargo/framer-viewNavigationController","owner":"chriscamargo","description":"A simple controller for FramerJS that allows you to transition between views with just a couple lines of code.","archived":false,"fork":false,"pushed_at":"2016-10-27T18:04:39.000Z","size":4263,"stargazers_count":216,"open_issues_count":3,"forks_count":19,"subscribers_count":22,"default_branch":"master","last_synced_at":"2024-11-14T03:34:18.694Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"CoffeeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/chriscamargo.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2015-07-10T17:50:25.000Z","updated_at":"2023-03-17T09:58:49.000Z","dependencies_parsed_at":"2023-10-20T04:48:25.851Z","dependency_job_id":null,"html_url":"https://github.com/chriscamargo/framer-viewNavigationController","commit_stats":null,"previous_names":["chriscamargo/framer-viewnavigationcontroller"],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chriscamargo%2Fframer-viewNavigationController","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chriscamargo%2Fframer-viewNavigationController/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chriscamargo%2Fframer-viewNavigationController/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chriscamargo%2Fframer-viewNavigationController/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/chriscamargo","download_url":"https://codeload.github.com/chriscamargo/framer-viewNavigationController/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252806411,"owners_count":21807199,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-03T00:00:51.972Z","updated_at":"2025-05-07T03:30:58.627Z","avatar_url":"https://github.com/chriscamargo.png","language":"CoffeeScript","funding_links":[],"categories":["Web","Modules"],"sub_categories":["Frontend and UI Components"],"readme":"# framer-viewNavigationController\nfVNC is a simple view controller for FramerJS that allows you to transition between views with just a couple lines of code.\n\n## Features\n- Built-in method for transitioning between views.\n- Customize the transition by choosing `up`, `down`, `left`, or `right` transitions.\n- Customize the movement by providing `animationOptions`.\n- Automatically places back buttons in your flow at the top left of your views.\n- Automatically transitions backward, using the opposite direction of your initial transition. (v1.1)\n\n#### TODO\n- Allow custom states for building unique screen-to-screen transitions.\n- Moar documentation!\n\n## How to Get Started\n\n**Step 1:** Include the module in your protoype.\n```coffeescript\n{ViewNavigationController} = require \"ViewNavigationController\"\n```\n\n\n**Step 2:** Create a new view controller.\n```coffeescript\nvnc = new ViewNavigationController\n```\nIn 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.\n\n\n**Step 3:** Create your views and add them to the view controller.\n```coffeescript\nmyFirstView = new Layer\n\tname: \"initialView\"\n\twidth: 750, height: 1334\n\timage: \"images/screen01.png\"\n\tparent: vnc\n\nmySecondView = new Layer\n\twidth: 750, height: 1334\n\timage: \"images/screen02.png\"\n\tparent: vnc\n```\nTo 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.\n\n\n**Step 4:** Set up a button to change views.\n```coffeescript\nmyButton = new Layer\n\twidth: Screen.width\n\theight: 88\n\ty: 1130\n\tparent: myFirstView\n\nmyButton.on Events.Click, -\u003e\n\tvnc.transition(mySecondView)\n```\nNow 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.\n\n## Methods\nfVNC 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.\n\n#### back()\nTo move backward by one history item, simply call the `back()` method.\n```coffeescript\nmyBackButton.on Events.Click, -\u003e\n\tvnc.back()\n```\nJust remember, if there's no prior view in the history stack, there's nothing to go back to, so nothing will happen.\n\n#### removeBackButton(view)\nTo remove the back button from a view, just call `removeBackButton()` and pass in the view you'd like to affect.\n```coffeescript\nvnc.removeBackButton(mySecondView)\n```\nThis code will prevent the back button from appearing on `mySecondView`.\n\n## Feature Requests\nIf 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.\n\n## Changelog\n\n##### v2 (Sun, May 15, 2016)\n- fVNC now emits a `change:view` event to notify you when a view change happens.\n- fVNC now keeps track of the transition you use, so the direction is automatically reversed when using 'back'.\n\n##### v3 (Fri, Oct 7, 2016)\n- fVNC updated to support Framer v72.\n\n##### v4 (Fri, Oct 21, 2016)\n- Fixed a bug with the `removeBackButton` method.  Thanks to @geligelu for finding and reporting this one.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchriscamargo%2Fframer-viewNavigationController","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fchriscamargo%2Fframer-viewNavigationController","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchriscamargo%2Fframer-viewNavigationController/lists"}