Safari and View Transitions

I think View Transitions are really neat technology. When used properly, they give a site some polish that I think users appreciate (even if they don’t notice) and of course, it provides the native app feel that users are used to.

View Transitions are enabled in Safari Technology Preview v. 192. However there are two different types. Same-document and cross-document. If you have some type of transition that is taking place on the same “page”, that should work in Safari Technology Preview. Adam Argyle has a great collection on Codepen that I’d recommend checking out.

However I am waiting very patiently for the cross-document version to land in Safari. This allows for view-transitions to work between pages on the same origin. For example, here is my site in Chrome,

and here is the same experience in Safari Technology Preview.

As you can see, Safari Technology Preview renders these pages like normal pages. No harm really, you can click links! That’s what counts in the end. However I like the little snappy-ness of the animation.

I think we will have to be careful with our choices on how we use these. Remember when you learned how to make a powerpoint in like 3rd grade and everyone just loaded them with animations and sound effects? We wouldn’t want that experience here. I was actually showing Joslyn how this works and they didn’t even notice the Chrome experience which I think is what I’d aim for. I would want the experience to feel different, but you don’t know why. Unless you’re a web nerd :).