SSGOI

strip

Strip translates both pages through a shallow ±20° perspective turn, like exchanging cards in a deck.

Expressive — Selected moments where motion supports the product tone.

When this motion fits

When to use
Use it for a gallery, portfolio, or selected card-deck moment that benefits from a strong perspective cue.
What moves
Pages translate past one another while tilting in perspective; it is not a full Y-axis flip.
Avoid when
Avoid it for frequent utility navigation or motion-sensitive experiences.

Add it to a route rule

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

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

const config = {
  transitions: [
    {
      from: "/list",
      to: "/detail/*",
      transition: strip(),
    },
  ],
};

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

Behavior

  • strip

    default

    One expressive behavior: a translated perspective swap between whole pages.

    Two portfolio pages trade places with a shallow perspective turn.
    strip()

    Open live demoOpens at the source screen

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

Read next