SSGOI

axis

Axis coordinates translation, scale, and fade along one spatial axis. Choose the axis that matches the relationship in your UI.

Sibling — Between peer screens at the same level.

When this motion fits

When to use
Use it for restrained Material-style movement between related peer screens.
What moves
Both pages coordinate along x, y, or z; route order supplies direction where the chosen type supports it.
Avoid when
Avoid it when the screens have no believable spatial axis.

Add it to a route rule

axis() sets the motion; the rule around it decides which navigations get it. The config shape is the same in every framework.

import { axis } from "@ssgoi/react/view-transitions";

const config = {
  transitions: [
    {
      ordered: ["/first", "/second", "/third"],
      transition: axis(),
    },
  ],
};

Pattern forms, priority and the scroll defaults that come with each rule shape are on Route rules.

Configurations

type, variant and option are independent. Each clip is recorded from a demo published on ssgoi.dev. Combinations without a published demo keep the API details without a substitute clip.

  • x · default

    type: xvariant: defaultdefault

    A fluid horizontal shared-axis transition. Route order decides left and right.

    Two checkout steps move along a fluid horizontal shared axis.
    axis({ type: "x" })

    Open live demoOpens at the source screen

  • x · snappy

    type: xvariant: snappy

    The same horizontal model with a tighter spring for fast, compact interfaces.

    Two messaging screens switch with a quick horizontal shared-axis spring.
    axis({ type: "x", variant: "snappy" })

    Open live demoOpens at the source screen

  • y · default

    type: yvariant: default

    A vertical shared axis whose direction reverses with route order.

    axis({ type: "y" })

  • y · non-directional

    type: yvariant: non-directional

    Every destination enters with the same vertical gesture, even when route order reverses.

    Video destinations always enter with the same vertical shared-axis gesture.
    axis({ type: "y", variant: "non-directional" })

    Open live demoOpens at the source screen

  • z · default

    type: zvariant: default

    Pages scale through depth, similar to a restrained container transform.

    axis({ type: "z" })

    Open live demoOpens at the source screen

Agent guide: /llms/transitions/axis.txt — every prop, the required markup, and a config fragment as plain text.

Read next