Basic use

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 Screen:

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.)

Setup

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.

flow.showNext screenA

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.

Transitioning to a new screen

You transition to a new screen with the same showNext() function. Here it transitions to screenB when the user taps on screenA:

screenA.onTap ->
    flow.showNext screenB

And to return to the previous screen, you use showPrevious().

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.)

iOS-style animation

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.

Without animation

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).