slide

Slide turns route order into a simple horizontal direction for peer screens.

Sibling — Between peer screens at the same level.

When this motion fits

When to use: Use it for tabs, steps, dates, or other siblings with an obvious previous and next.
What moves: Forward pushes the current page left; backward reverses the same movement.
Avoid when: Avoid it for parent-to-child navigation or unordered destinations.

Add it to a route rule

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

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

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

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

Behavior

slide
default
One behavior: a direct horizontal push whose direction comes from the ordered route list.
```
slide()
```
Open live demoOpens at the source screen

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

Read next