built with coffee

View Transitions

Sep 10, 2023

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:

1const switchView = (state: boolean) => { 2 if (document.startViewTransition) { 3 document.startViewTransition(() => { 4 flushSync(() => { 5 setCoverView(state); 6 }); 7 }); 8 } else { 9 setCoverView(state); 10 } 11};

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:

Posted: September 2023

Tagged: webdev