Make View Transition API work with react-router

[lukaskoeller]

What is the new or updated feature that you are suggesting?

With Chrome 111+ comes the new View Transition API enabled in chromium browsers by default. The new feature would be to implement this API in react-router so that any added animation in CSS via ::view-transition-* would be picked up and executed.

Why do we need this feature?

Why view transitions are needed is well explained in this section of the chrome article.

Implementing this with react-router makes it very easy to focus on adding animations for page transitions using a native browser api. Acting / intercepting on navigation events and updating the DOM would then be part of react and react-router.
So as long as the used browser supports the view transition api, react-router would startViewTransition on navigation and trigger any transition if implemented in CSS.

Advantages:

• Keeps the implementation effort low, since solely the startViewTransition would need to be handled by the library, not the animation itself.
• It is a progressive enhancement that works if the browser supports and if not just omits this part of executes some sort a fallback.

What is possible now?

As of now, you can already make since possible partly and with some drawbacks.

export const CustomLink: FC<CustomLinkProps> = (props) => {
  const {
    to,
    children,
  } = props;
  const navigateTo = useNavigate();

  const navigate = (to: string) => {
    if (!document?.startViewTransition) {
      navigateTo(to);
    } else {
      document.startViewTransition(() => {
        navigateTo(to);  
      });
    }
  }

  return (
    <button onClick={() => navigate(to)}>{children}</button>
  )
}

This rather simple, unaccessible <CustomLink> component startViewTransition when there is an onClick event and then uses navigate to the path provided via to.
This works for the case of clicking the <button> but is not semantically correct (should be an anchor) and is not working e.g. for browser back buttons.

Status Quo on Browser Support and Implementation

Chrome, Edge and Opera already support the View Transition API (see can I use). These two make around 70% of the worldwide browser market share. Firefox is supportive about it. Safari seems supportive about it too.

• Sveltekit makes it easy to use View Transitions with version 1.24 through onNavigate.
• Astro supports View Transitions.
• Nuxt ships with experimental support vor View Transitions.
• Next has an open discussion on adding support

References

• [v6] First-class animation primitives It's core topic is animations too, but without explicitly focusing on the View Transition API.

[lili21]

we need this one.

[mrksbnch]

Similar to how Sveltekit supports view transitions, it would be enough to have a lifecycle function which fires just at the right time. This would then work for all kinds of navigations (without custom links) and can also be ported over to Remix.

[yar2001]

Note that it is unreliable to put navigate in document.startViewTransition because the callback function in startViewTransition should be waiting until the old page dom is unmounted. Or else, the transition may start even though the old page hasn't been unmounted (especially when the new page is in suspense).

document.startViewTransition(async () => {
    await oldDomUnmounted;
});

Therefore, a reliable solution for View Transition should be implemented internally in the React Router because the startViewTransition API needs to know when the new dom is finished loading (or at least the old dom is finished unmounting), and the current React Router API seems unable to achieve it conveniently.

[brophdawg11]

Good news! Initial support for View Transitions has been added in #10916 and will be released soon in 6.17.0 (and is currently available in 6.17.0-pre.0). You can find the docs on the dev branch and see an example usage in https://github.com/brophdawg11/react-router-records.

[hdadr]

Whats the expected time to be shipped?

[elliotsayes]

Appears to be released already https://github.com/remix-run/react-router/blob/main/CHANGELOG.md#view-transitions-