Skip to content

docs(how-to/view-transitions): add programmatic navigation example #13627

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
30 changes: 26 additions & 4 deletions docs/how-to/view-transitions.md
Original file line number Diff line number Diff line change
Expand Up @@ -20,13 +20,35 @@ The simplest way to enable view transitions is by adding the `viewTransition` pr

Without any additional CSS, this provides a basic cross-fade animation between pages.

### 2. Enable view transitions with programmatic navigation

When using programmatic navigation with the `useNavigate` hook, you can enable view transitions by passing the `viewTransition: true` option:

```tsx
import { useNavigate } from "react-router";

function NavigationButton() {
const navigate = useNavigate();

return (
<button
onClick={() => navigate("/about", { viewTransition: true })}
>
About
</button>
);
}
```

This provides the same cross-fade animation as using the `viewTransition` prop on Link components.

For more information on using the View Transitions API, please refer to the ["Smooth transitions with the View Transition API" guide][view-transitions-guide] from the Google Chrome team.

## Image Gallery Example

Let's build an image gallery that demonstrates how to trigger and use view transitions. We'll create a list of images that expand into a detail view with smooth animations.

### 2. Create the image gallery route
### 1. Create the image gallery route

```tsx filename=routes/image-gallery.tsx
import { NavLink } from "react-router";
Expand Down Expand Up @@ -62,7 +84,7 @@ export default function ImageGalleryRoute() {
}
```

### 3. Add transition styles
### 2. Add transition styles

Define view transition names and animations for elements that should transition smoothly between routes.

Expand Down Expand Up @@ -98,7 +120,7 @@ Define view transition names and animations for elements that should transition
}
```

### 4. Create the image detail route
### 3. Create the image detail route

The detail view needs to use the same view transition names to create a seamless animation.

Expand All @@ -122,7 +144,7 @@ export default function ImageDetailsRoute({
}
```

### 5. Add matching transition styles for the detail view
### 4. Add matching transition styles for the detail view

```css filename=app.css
/* Match transition names from the list view */
Expand Down