I’ve been meaning to play around with view transitions since reading this blog post almost two years ago: Smooth and simple transitions with the View Transitions API, but I haven’t had a good reason to implement them yet in real (💰) life. So I figured why not do something on this blog.

The first thing I realized is that doing full page transitions in Next led me to a lot of heated discussions about server-side rendering and Next router and “are we building the web wrong” kind of conver-arguments. Not what I had the patience for on a Sunday. So I looked around for something smaller to try it on. About the only page that has same-page interaction right now is my reading list page, which has a list/grid toggle.

The code here is pretty minimal, and I went with the out of the box view transition of cross fade, so no CSS. Just:

const switchView = (state: boolean) => {
  if (document.startViewTransition) {
    document.startViewTransition(() => {
      flushSync(() => {
        setCoverView(state);
      });
    });
  } else {
    setCoverView(state);
  }
};

Which does this in Chrome:

And here’s Safari, janky and sad.

After setting it up I realized there is a pretty good use case for this at my 💰 job. Just gotta get this tiny improvement prioritized over 46,789 other things.

Besides the Google article noted above, I also read through these resources to understand View Transitions (especially in React) better:

• View Transitions API
• Using View Transition API in React App