Transition events

A FlowComponent emits transition events. With them, you can make things happen when a transition starts or ends.

So… Halt is only triggered when the transition didn’t get to finish (because another transition began), and End is only triggered when the transition did complete. Hence, these two will never be seen together.

But Stop is called every time a transition stops (together with either Halt or End).

Meaning the most useful one of the bunch is onTransitionEnd because it allows you to update the interface once you’ve arrived at the next screen.

Examples

Next up are a few example uses, taken from projects in the FlowComponent pages.

Example from: Listening to a screen’s scroll events

Once the transition has finished, we loop through all the children of the tabbar, and on every tab, we set the color of its first child (the icon itself) to gray ("#ddd").

flow.onTransitionEnd ->
    for button in tabbar.children
        button.children[0].color = "#ddd"
    if flow.current is inbox
        button_inbox.children[0].color = "#000"
    else if flow.current is liked
        button_liked.children[0].color = "#000"
    else
        button_messages.children[0].color = "#000"

And then we check if the current screen is inbox, liked, or … something else, to make the correct tab icon black ("#000").

Example from: Current, Previous, and Stack

When the transition finishes, we set the navigation bar’s title, Title_Text, to the name of the current screen.

flow.onTransitionEnd ->
    Title_Text.text = flow.current.name
    # Are we on the first screen?
    if flow.stack.length is 1
        Back_Button.visible = no
    else
        Back_Button.visible = yes
        Back_Text.text = flow.previous.name

We also set Back_Text (the text of the Back_Button) to the name of the previous screen.

But we make the Back_Button only visible when we’re not on the first screen.

A second example from: Current, Previous, and Stack

Here, after the same, dependable, trustworthy onTransitionEnd, we loop through all the screens in the stack to construct a breadcrumbs trail for the breadcrumbs Text Layer.

# Update breadcrumbs after every transition
flow.onTransitionEnd ->
    # For all screens in the “stack”
    for screen, i in flow.stack
        # First screen
        if i is 0
            breadcrumbs.text = screen.name
        # Remaining screens have ‘>’ before the name
        else
            breadcrumbs.text += " > " + screen.name

When a screen is the first one (i is 0), we set its name on the text of breadcrumbs.

The names of the subsequent screens are then appended with " > " in front.

For one more example of using onTransitionEnd and current, take a look at “02. Onboarding” in Framer’s Fiber UI Kit.

Overview of the transition events

(The transitions in the above project are slowed down with Framer.Loop.delta.)