SSGOI

Transitions

Twelve documented effects. Pick the one that matches the navigation you are building.

Start from what the user is doing — opening a detail page, switching tabs, expanding a card — and pick the effect that matches. The Rule column is the shape you write around it; the three shapes are explained below.

What the user is doingTransitionRule
A list opens a detail pagedrillon + except
Tabs or steps with a left-right orderslideordered
Peer screens, Material shared axisaxisordered
Compose, filters, a modal-like routesheeton
A card or image expands into detailzoomfrom / to
One element carries across two pagesherofrom / to
A vertical sequence, editorial pagingscrollordered
Anything unrelated (the fallback)fadepriority: -100, on: "/**"

The rest — film, strip, rotate and jaemin — are picked for tone rather than for a route relationship, so any rule form works with them.

The three rule forms

An effect describes how pages move. The rule around it describes where that applies and which way is forward.

RuleWhat it matches
onA family of routes. Entering it is forward, leaving it is backward, and except carves out the entry point. Both on and except accept an array of patterns.
from / toOne exact relationship. It matches both directions unless you set bidirectional: false, and each side accepts an array of patterns.
orderedA list of routes in order — one pattern per slot. Both ends must land on different entries; their index order decides the direction.

When several rules match, the winner is decided by priority, then by how specific the paths are, then by declaration order — the earliest rule wins, not the last. A rule with no priority is 0, which is why a negative value parks a broad fallback under everything else. Route rules has the full pattern syntax and the scoring.

Each form also carries a scroll default: from / to and on restore the source and reset the destination, ordered restores both. Scroll behavior covers the overrides.

See the four most common ones move

These four cover most mobile navigation. Open one for its variants and props.

  • SSGOI

    drill

    Mobile hierarchy with an unmistakable back direction.

    List → detail · rule: on + except

    Variants and usage
  • SSGOI

    sheet

    A temporary task rising over its origin on mobile or web.

    Compose, filters, temporary tasks · rule: on

    Variants and usage
  • SSGOI

    slide

    Ordered sibling screens moving side to side.

    Tabs and ordered steps · rule: ordered

    Variants and usage
  • SSGOI

    zoom

    One selected card or image opens into a whole detail page.

    Card or image → detail · rule: from / to

    Variants and usage

Drill into a family, or open a sheet above tabs

Two configs you can paste. Both go in the array returned by transitions in your <Ssgoi> config.

Drill into a route family

The list is the boundary. Entering any descendant drills in; returning to the list drills out.

{
  on: "/products/**",
  except: "/products",
  transition: drill(),
}

Open a sheet above ordered tabs

The tab order owns sideways movement. A second rule opens the compose route as a sheet. on: "/compose" would cover arrivals from anywhere; listing the tabs as from keeps the sheet to the tab bar.

const TABS = ["/feed", "/search", "/profile"];

[
  {
    ordered: TABS,
    transition: slide(),
  },
  {
    from: TABS,
    to: "/compose",
    transition: sheet({ type: "blur" }),
  },
]

More transitions

Reach for these when the screen needs a different spatial model or a more expressive treatment. The same list in plain text: transitions.txt.

Read next