A FlowComponent emits transition events. With them, you can make things happen when a transition starts or ends.
|Triggers when the transition starts|
|Triggers when the transition is interrupted|
|Triggers when the transition has stopped (whether it ran until the end or not)|
|Triggers when a transition has run until the end|
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.
Stop is called every time a transition stops (together with either
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 (
flow.onTransitionEnd -> for button in tabbar.children button.children.color = "#ddd" if flow.current is inbox button_inbox.children.color = "#000" else if flow.current is liked button_liked.children.color = "#000" else button_messages.children.color = "#000"
And then we check if the
current screen is
liked, or … something
else, to make the correct tab icon black (
Example from: Current, Previous, and Stack
When the transition finishes, we set the navigation bar’s title,
Title_Text, to the
name of the
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
But we make the
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
screen is the first one (
i is 0), we set its
name on the
The names of the subsequent screens are then appended with
" > " in front.
For one more example of using
current, take a look at “02. Onboarding” in Framer’s Fiber UI Kit.
(The transitions in the above project are slowed down with