You can use any type of layer as a ‘screen’ in your FlowComponent.
So you can create artboards in Design, import them from Sketch or Figma, create layers in Code, or use any combination of these.
As an example I’ll use two layers that are the
size of the
screenA = new Layer size: Screen.size backgroundColor: "#00AAFF" Utils.labelLayer screenA, "Screen A"
screenB = new Layer size: Screen.size backgroundColor: "#FFCC33" Utils.labelLayer screenB, "Screen B"
(I gave them visible names with 🛠 Label Layer.)
To use a FlowComponent, you first create one with
new, like you do with other components.
flow = new FlowComponent
And then you use the
showNext() function to give it an initial screen.
That’s right. You did a “show next,” and nothing happened—no animation or transition. That’s the way it is. You just have to give it a base to start from.
You transition to a new screen with the same
showNext() function. Here it transitions to
screenB when the user taps on
screenA.onTap -> flow.showNext screenB
And to return to the previous screen, you use
screenB.onTap -> flow.showPrevious()
(You don’t have to tell
showPrevious() which screen to go to, because at any time there will always be only one previous screen.)
With this default
showNext() function, screens slide in from the right. The screens animate as they would on an iPhone.
On the next page, you can see how it looks slowed down. For this video, I changed a global Framer setting,
Framer.Loop.delta, to have all animations run at a fourth of their normal speed.
# All animations at 1/4 their speed Framer.Loop.delta = Framer.Loop.delta / 4
(Same prototype as the former one. This slow motion code is at the top of the project, commented out.)
Notice how the previous page also moves, but only at half the speed.
You can also instantly switch to the next screen, without animation.
layerA.onClick -> flow.showNext layerB, animate: no
And of course you can add this same
animate argument when returning to the previous screen:
flow.showPrevious animate: no
You might use this for switching between the screens of a Tab Bar (see the example in Headers and footers).