framer-viewNavigationController
A simple view controller for FramerJS that enables directional transitions between views with minimal code.
What is framer-viewNavigationController?
framer-viewNavigationController is a FramerJS module that provides a view controller for managing transitions between multiple views in interactive prototypes. It solves the problem of manually implementing navigation flows, back button logic, and directional animations by offering a simple, code-light solution.
Designers and developers using FramerJS to create interactive prototypes with multi-screen navigation, particularly those building app-like flows with directional transitions.
Developers choose fVNC because it drastically reduces the code needed for view navigation in FramerJS, automatically handles back navigation and button placement, and offers customizable directional transitions without complex setup.
Overview
A simple controller for FramerJS that allows you to transition between views with just a couple lines of code.
Use Cases
Best For
- Creating app prototypes with screen-to-screen navigation in FramerJS
- Implementing directional slide transitions between views
- Building interactive demos with automatic back button management
- Rapid prototyping of multi-view user flows with minimal code
- Adding navigation history stacks to FramerJS projects
- Designing interactive presentations with controlled view sequencing
Not Ideal For
- Production applications built with modern frameworks like React or Vue.js
- Prototypes requiring complex, non-linear navigation or custom animation states beyond simple directional slides
- Teams that rely on up-to-date documentation and active maintenance, given the last update was in 2016
Pros & Cons
Pros
Enables view transitions with just a couple lines of CoffeeScript, as shown in the 'How to Get Started' section, reducing boilerplate for rapid prototyping.
Handles back button placement and history tracking automatically, reversing transition directions when using the back() method, which simplifies flow creation.
Supports up, down, left, and right transitions with control over timing and easing via animationOptions, offering flexibility in visual feedback.
Emits a 'change:view' event to notify of view changes, facilitating synchronization with other prototype logic, as noted in the changelog.
Cons
Last updated in 2016 with no recent commits, posing compatibility risks with newer Framer versions and lacking bug fixes or feature additions.
The README acknowledges a need for 'Moar documentation!', making it difficult for users to understand advanced usage or troubleshoot issues effectively.
Custom states for unique screen-to-screen transitions are listed as a TODO, indicating a lack of support for complex animation scenarios beyond basic slides.
Frequently Asked Questions
Related Projects
iOS Kit for FramerJSiOS Kit for FramerJS is a comprehensive prototyping toolkit designed to accelerate the creation of high-fidelity iOS app prototypes. It provides a full suite of native iOS UI components and a dynamic layout engine, enabling designers and developers to build realistic, responsive prototypes quickly. ## Key Features - **Native iOS Components** — Pre-built, customizable UI elements like alerts, banners, buttons, keyboards, navigation bars, and tab bars that mimic iOS behavior. - **Dynamic Layout Engine** — A constraint-based layout system that uses points instead of pixels, ensuring prototypes scale correctly across different iOS devices. - **Sketch Integration** — Automatically converts Sketch layers into iOS Kit components with proper constraints, streamlining the design-to-prototype workflow. - **Real Device Override** — Adjusts the prototype frame to match the actual device screen size when viewed on real hardware, eliminating white space. - **Supporting Utilities** — Helper functions for tasks like color conversion, time formatting, SVG manipulation, and text layer updates. ## Philosophy The project emphasizes speed and quality, allowing users to focus on unique interactions by handling the intricacies of native iOS styling and responsive behavior.
ViewController-for-FramerMulti step user flows in Framer.js
shortcuts-for-framerA collection of useful functions to make mobile prototyping with Framer easier.
Input-FramerFramer module to add inputs to your prototypes and easily turn your designs inputs into real inputs
Found a gem we're missing?
Open-Awesome is built by the community, for the community. Submit a project, suggest an awesome list, or help improve the catalog on GitHub.