View Transitions
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