Events » Transition events

Transition events

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

Transition events
onTransitionStartTriggers when the transition starts
onTransitionHaltTriggers when the transition is interrupted
onTransitionStopTriggers when the transition has stopped (whether it ran until the end or not)
onTransitionEndTriggers when a transition has run until the end

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.


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"
        button_messages.children[0].color = "#000"
Download Framer project

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

The tab bar icons update after the transition

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 =
    # Are we on the first screen?
    if flow.stack.length is 1
        Back_Button.visible = no
        Back_Button.visible = yes
        Back_Text.text =
Download Framer project

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.

current screen as title, previous screen as back button

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 =
        # Remaining screens have ‘>’ before the name
            breadcrumbs.text += " > " +
Download Framer project

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.

A breadcrumbs trail with all the screens in the Stack

Overview of the transition events

The different transition events
Download Framer project

(The transitions in the above project are slowed down with

Leave a Reply

Your email address will not be published. Required fields are marked *