Getting started

How it works

How flemo moves screens, in pictures: a stack of cards, a movement written down once, a swipe your finger drives, and a few pieces that stay still.

2 min read

flemo moves screens the way a phone app does. This page shows how, one picture at a time, without any code.

Screens are a stack of cards

Think of every screen in your app as a card. The Router keeps the cards in a pile. push puts a new card on top of the pile, and pop takes the top card off, so the one underneath shows again.

push lays a new screen on top. pop lifts the top one off and the screen below comes back.

The pile is also your browser history, so the Back button pops too. See .

The movement is written down first

A transition is a short recipe: where each screen starts and where it ends. When the Router starts, flemo turns every recipe into CSS keyframes, once.

Your transition becomes CSS once. After that the browser plays it by itself on every push and pop.

Because the browser plays the CSS, no JavaScript has to run on every frame while screens move. That keeps the motion smooth even when the page is busy. See .

One push, step by step

Here is what happens when you push a screen with the cupertino transition.

1: the list is showing. 2: flemo renders the new screen first and waits for it to be drawn. 3: both screens move together. 4: the new screen is on top.

The list is on screen.
flemo renders the new screen and waits until it has been drawn once, so you never see an empty screen slide in.
Both screens start at the same moment. The new one slides in from the right. The list moves back a little and gets darker, which is a .
The new screen is on top of the stack. The list stays underneath, ready for when you go back.

A pop plays the same steps backwards.

Your finger drives the swipe

When you start swiping from the left edge, flemo prepares the pop but does not play it. Instead, the distance your finger has moved decides how far along the pop is. Move your finger back and the screens move back with it.

The swipe sets how far along the pop is. Let go far enough and it finishes going back. Let go early and it slides back.

When you let go, flemo looks at how far you swiped and how fast you were moving. If either is enough, the pop finishes. If not, the screens slide back to where they were. Either way the rest of the movement uses the transition's own easing.

The same thing on two screens

Sometimes the same thing appears on both screens, like a photo in a list that becomes the big photo on the next screen. Wrap it in Morph on both screens with the same layoutId.

flemo measures the photo on both screens, then moves it from the small box to the big one.

flemo measures where the photo is on the old screen and where it will be on the new one. The photo on the new screen starts in the old spot and moves to its own place, so it looks like one photo that grew. See .

What stays still and what changes

Not everything has to move. Anything outside a Slot stays still while only the inside moves, which is how a header or a sidebar stays put. And when two screens share a header, Part changes only the piece that is different, such as the title.

Left: the header outside the Slot stays still while the screens inside move. Right: the header stays and only its title changes.

See and . To draw a menu above that header, use .

Stacks inside stacks

A screen can hold another Router. That inner Router has its own pile of cards and moves only inside its box, which is how a tab or a panel gets its own back button.

The panel has its own Router. Moving inside the panel changes only the panel, not the whole app.

builds an app with all of these, one step at a time.

Edit on GitHub

How it works

#Screens are a stack of cards

#The movement is written down first

#One push, step by step

#Your finger drives the swipe

#The same thing on two screens

#What stays still and what changes