I’ve been meaning to play around with view transitions since reading this blog post almost two years ago: 

, 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 

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

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:

built with coffee

Posts tagged: webdev

View Transitions