Experiment with stacked navigation flow, kind of like Framer Classic’s FlowController. Much refactored.
Rewrites how pages are shown. In previous versions the component would unmount components that don’t need to be shown, keeping track of only the current and previous page. In this version, all pages in the stack are kept until removed from the stack.
For example, if we navigate to PageA, PageB, and then PageC, all three pages will remain mounted. If we show previous, our position will move to PageB but PageC will remain mounted. If we then navigate from PageB to PageA, PageC will be unmounted and we’ll mount a second (but separate) PageA.
This is useful for cases where pages have content (such as form fields, scroll positions, or interaction states) that need to be maintained. Traveling “back” to a previously visited screen will restore that screen exactly as the user had left it.
This is also useful for navigation flows that load different versions of the same page, such as articles with different content but the same “page”. (More on this in future updates).
Links and Targets#
A link’s target can either be the name of a Frame (so long as it’s connected to the Flow component) or the name of a Marker that you’ve added to one of your connected Frames.
Navigating from code#
You can navigate from code, too. Click here to see a basic code component that will work with the Flow package.
You can navigate from Overrides, too.
You can override the
onChangePage event to get the name of the current page.
If you want to tweak the component’s transitions, override the
variants prop. It takes three variants:
When moving “up” the stack, the new Frame will start at
ahead and move to
current, while the previous Frame moves from
behind. When moving “down” the stack, the current Frame will move from
current, while the previous Frame will move from
An “instant” set of transitions would look like this:
defaultProps at the bottom of this page for the default animation variants.
By default, the component will preserve all of the Frames in the stack. They’ll stay mounted, so you won’t lose any data state or scroll positions. However, you might also want to just instantly snap between pages, unmounting all but the currently shown page. (You’d probably want to use the “instant” transitions, too).
Here are all of the component’s default props.