https://github.com/blankeos/vike-view-transitions
⚡️A quick tutorial on how to do view transitions in Vike across pages.
https://github.com/blankeos/vike-view-transitions
Last synced: 4 months ago
JSON representation
⚡️A quick tutorial on how to do view transitions in Vike across pages.
- Host: GitHub
- URL: https://github.com/blankeos/vike-view-transitions
- Owner: Blankeos
- Created: 2025-02-28T06:38:35.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-03-04T12:26:39.000Z (over 1 year ago)
- Last Synced: 2025-03-04T13:30:20.666Z (over 1 year ago)
- Language: TypeScript
- Size: 14.7 MB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 🌬️ Vike View Transitions
Tutorial/Demonstration on how to easily do View Transitions in Vike (mainly focusing on **cross-page transitions** since that generally requires the client-side router framework being used).
That means performing Page Transitions in NextJS is unique (which is surprisingly hard) vs Vike (which is actually extremely easy!).
## 2-step Tutorial
1. **Indicate what to Morph across pages.**
```tsx
// Page 1.
![]()
// Page 2
![]()
```
2. **Perform Navigation:**
The key here is using the `navigate()` function from `vike/client/router`. ([See 'Explanation' why](#explanatio)). Afaik, you can't use anything else.
- 2.1. With `` this is extremely straightforward:
```tsx
{
if (document.startViewTransition)
document.startViewTransition(async () => {
await navigate("/image-1"); // Make sure to await.
});
}}
>
Go to Page
```
⚠️ The only thing that sucks with button is **browser anchor tag accessibility** (you can't middle-click to open in new tab OR right-click to see the context-menu). So you might want to keep it an anchor tag instead 👇.
- 2.2 With `` - just a teensy bit more code just to keep it accessible, but I can explain:
// Second, we prevent the default behavior of the anchor tag.
// That means href technically won't work. (Which is good, so we can use `navigate()` instead).
e.preventDefault();
// Finally, start the view transition and call navigate inside the callback!
if (document.startViewTransition)
document.startViewTransition(async () => {
await navigate("/image-1"); // Make sure to await. Make sure it's the same as href.
});
}}
>
Go to Page
```
## Explanation
Your first thought may be to use [`+onPageTransitionStart`](https://vike.dev/onPageTransitionStart) or [`+onPageTransitionEnd`](https://vike.dev/onPageTransitionEnd). You may think that adding `document.startViewTransition()` in that Vike hook would work,
but since the order of logic behind view transitions is "Start view transition, take a screenshot of current page, load new page, take a second screenshot, apply transition".
This won't work because the "load new page" essentially MUST HAPPEN inside the startViewTransition callback.
So the magic of view transitions lies with the `navigate()` function from `vike/client/router`.
Second, you might be asking, _"Why do I need to override the `` tag's default behavior and propagation?"_. The `` by itself is kind of bad for two reasons:
- [Vike's client-side router interceptor](https://github.com/vikejs/vike/blob/81afe1fea7c84791ae634c9514029cf3fb5e53c0/vike/client/client-routing-runtime/initOnLinkClick.ts#L8) - Although the default **client-side navigations** are snappy and convenient, we don't have control of when the navigation starts and ends. For view transitions, we need complete knowledge for when a change from A to B has happened and ended. You WILL get inconsistent transitions if you don't override it. Hence we do `e.stopPropagation()` and use `navigate()` instead.
- Once we disable the client-side router via stopProgation, the `` tag will now perform MPA navigations (which is kinda unintuitive if you chose Vike, Astro is much better at this), you can see this if the DevTools Network request tab responds with HTML instead of JSON when doing navigations. Hence we also `e.preventDefault()`.
🎉 Huge props to the Vike team for a well-crafted API for `navigate()` to support view transitions!