{"id":13714861,"url":"https://github.com/jchavarri/FramerNavigationComponent","last_synced_at":"2025-05-07T03:31:00.513Z","repository":{"id":76212573,"uuid":"41556158","full_name":"jchavarri/FramerNavigationComponent","owner":"jchavarri","description":"Reusable and customizable navigation component for Framer, based on iOS","archived":false,"fork":false,"pushed_at":"2015-08-31T01:34:37.000Z","size":1653,"stargazers_count":30,"open_issues_count":4,"forks_count":2,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-04-02T11:36:26.539Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/jchavarri.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}},"created_at":"2015-08-28T15:56:38.000Z","updated_at":"2025-02-06T16:03:06.000Z","dependencies_parsed_at":"2023-03-05T17:00:25.101Z","dependency_job_id":null,"html_url":"https://github.com/jchavarri/FramerNavigationComponent","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jchavarri%2FFramerNavigationComponent","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jchavarri%2FFramerNavigationComponent/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jchavarri%2FFramerNavigationComponent/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jchavarri%2FFramerNavigationComponent/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jchavarri","download_url":"https://codeload.github.com/jchavarri/FramerNavigationComponent/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252806405,"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.184Z","updated_at":"2025-05-07T03:30:57.688Z","avatar_url":"https://github.com/jchavarri.png","language":"JavaScript","funding_links":[],"categories":["Modules"],"sub_categories":[],"readme":"# Navigation Component\n\nA navigation component for Framer. It features:\n\n- Default transitions animations for pushing and popping views, based on iOS UINavigationController, that you can replace with your own ones.\n- Default header style and animations to show the current and previous layer, also easily customizable.\n- Default header style adapts to iPhone6+ screen size\n- Custom events are emitted before and after popping and pushing\n\n## Examples\n\n#### [Simple](http://share.framerjs.com/atdu7phom7cz/)\n#### [Complex](http://share.framerjs.com/5bb4btk491ux/)\n![Navigation component](navigationComponentComplex.framer/images/demo.gif)\n#### [Custom header](http://share.framerjs.com/r6k5788vlyds/)\n![Custom header](navigationComponentCustomHeader.framer/images/demo.gif)\n#### [Custom transition animation](http://share.framerjs.com/c7e89e4wnvu0/)\n![Custom transition animation](navigationComponentCustomAnimation.framer/images/demo.gif)\n\n## Get started\n\n- Copy the `navigationComponent.coffee` file into your `modules` folder\n- Add `NavigationComponent = (require \"navigationComponent\").NavigationComponent`\n- Create the NavigationComponent: `navigationComponent = new NavigationComponent\n\trootLayer: yourFirstLayer`\n\n## Simple example\n\n```coffee\n\t\nNavigationComponent = (require \"navigationComponent\").NavigationComponent\n\ncreateFullScreenLayer = (text, title) -\u003e\n\tnewLayer = new Layer\n\t\twidth: Screen.width\n\t\theight: Screen.height\n\t\thtml: text\n\t\tbackgroundColor: Framer.Utils.randomColor()\n\tnewLayer.title = title\n\tnewLayer.style =\n\t\t\"font-size\" : \"600px\"\n\t\t\"color\" : \"white\"\n\t\t\"line-height\" : Screen.height + \"px\"\n\t\t\"font-weight\" : \"bold\"\n\t\t\"text-align\" : \"center\"\n\treturn newLayer\n\t\nfirstLayer = createFullScreenLayer(\"1\", \"Settings\")\nfirstLayer.name = \"First screen\"\nfirstLayer.backgroundColor = \"white\"\nfirstLayer.style[\"color\"] = \"orange\"\n\nnavigationComponent = new NavigationComponent\n\trootLayer: firstLayer\n\nfirstLayer.on Events.Click, -\u003e\n\tsecondLayer = createFullScreenLayer(\"2\", \"Long title screen\")\n\tsecondLayer.name = \"Second screen\"\n\tnavigationComponent.push(secondLayer)\n\n```\n\n## Constructor params\n\n- `firstLayer` *(required)* — The layer to initialize the navigation component with.\n- `animationPush` — A function that is called when the push animation is needed. It expects two parameters: `fromLayer` -the layer that is on-screen and is going to be pushed- and `toLayer` -the layer that will be shown-. Use these parameters to implement custom animations.\n- `animationPop` — You guessed it :) Same as `animationPush` but when popping.\n- `animationTime` — A custom transition time. *This parameter is required when implementing custom animations*.\n\n## Properties\n\n- `navigationLayers` — The array of layers that are handled by the navigation component.\n- `headerLayer` — The layer that is shown on top of the navigation layer. By default, this layer shows always a custom property `title` string that can be added to each layer on the navigation stack. This layer, when using the default style, has 3 properties: `titleLayer`, `leftLayer` and `backArrow`.\n- `currentLayerIndex` — The index of the layer that is being shown.\n\n## Functions\n\n- `push()` — Push a new layer into the navigation component.\n- `pop()` — Pop the latest added layer from the navigation component. NOTE: The layer popped is destroyed after being removed from the navigation component, so you might want to create a copy if you want to reuse it later.\n- `popToRootLayer()` — Pops to the root layer.\n- `popToLayerAtIndex(index)` — Pops layers until the specified index is at the top of the navigation stack\n\n## Events\n\n- `Events.NavigationWillPush` — Called before a new layer is pushed into the navigation stack. It includes an object that has the following properties: `navigationLayer`, `currentLayer` and `nextLayer`.\n- `Events.NavigationDidPush` — Called after a new layer has been pushed into the navigation stack. It includes an object that has the following properties: `navigationLayer`, `currentLayer` and `nextLayer`.\n- `Events.NavigationWillPop` — Called before a layer (or layers) are popped from the navigation stack. It includes an object that has the following properties: `navigationLayer`, `currentLayer`, `nextLayer` and `index`.\n- `Events.NavigationDidPop` — Called after a layer (or layers) are popped from the navigation stack. It includes an object that has the following properties: `navigationLayer`, `currentLayer`, `nextLayer` and `index`.\n\n### References\n\nThanks to the following creators for sharing their work:\n\n- [framer-viewNavigationComponent](https://github.com/chriscamargo/framer-viewNavigationComponent) by Chris Camargo\n- [Cloning the UI of iOS 7 with HTML, CSS and JavaScript](http://come.ninja/2013/cloning-the-ui-of-ios-7-with-html-css-and-javascript/) by Côme Courteault\n\nOther references: \n\n- [iOS 8 Design Cheat Sheet for iPhone 6 and iPhone 6 Plus](http://click-labs.com/ios-8-design-cheat-sheet-and-free-iphone6plus-gui-psd/)\n\n## TODO\n\n- Add slide right to pop\n- Replace header layers animations for state transitions\n- Add right button action","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjchavarri%2FFramerNavigationComponent","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjchavarri%2FFramerNavigationComponent","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjchavarri%2FFramerNavigationComponent/lists"}