rotate

Rotate spins the outgoing and incoming pages through opposite 180° turns in the screen plane.

Expressive — Selected moments where motion supports the product tone.

When this motion fits

When to use: Use it for a playful or emphatic switch where a full-screen spin fits the product personality.
What moves: The outgoing page rotates to 180° and disappears halfway; the incoming page unwinds from -180°.
Avoid when: Avoid it for frequent utility navigation, dense reading flows, or motion-sensitive contexts.

Add it to a route rule

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

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

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

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

Behavior

rotate
default
One behavior: opposite planar half-turns with a clean midpoint hand-off.
```
rotate()
```
Open live demoOpens at the source screen

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

Read next