Shared Element Transitions

What Is This!?

Around Halloween of 2017 I wrote a blog post for my former employer about what I saw as an upcoming change to web browsing: with the maturing of frameworks like next/nuxt built on React/Vue, transitions between standard pages of content would become easier to implement, and raise the expectations of users.

"Opening" a hard disk in the 80's
Animation in the original "Finder" illustrates this is what you clicked, and this is what its contents are

By this I meant, clicking on a link on a site and being unceremoniously dumped on another page on the same site would seem primitive. Users would begin to expect more friendly, intentional transitions from the content they clicked to the new content being presented. The head of the creative director and I called it "transitional web pages…?" because that was the best we could do.

Well, as of the first half of 2023, little has changed. Even as static web hosting has (re)exploded and building "appy" sites has become easier, you rarely see evidence of anything but a simple cross-fade between pages on appy sites.

So, I was excited when I saw this feature in development for Chrome They previously called it "Shared Element Transitions" which is not catchy but more accurate than their current term, "View Transitions."

Their justification for the feature is:

Page transitions not only look great, they also communicate direction of flow, and make it clear which elements are related from page to page. ... The truth is, state transitions are hard, even with the tools we already have.

The idea is that, someday, even non-appy sites will be able to get "View Transitions" because the browser will be able to superimpose the page that's transitioning in over the page that's transitioning out, and the developer will be able to style these transitions with just CSS. That's really great!

But… that's not today. Currently, they are only targeting appy sites that can already do this on their own (but aren't because, as they state, it's hard). And it's only Chrome.

This inspired me to generalize my approach to these transitions in the past. My Vue 3 solution is specifically geared to transitioning between two shared elements — like a title or a featured image — across two pages.

One concern I have about the Chrome feature is

You use it like this:

<template>
  <!-- post -->
  <div>
    <img class="header-image" :src="post.header" :alt="post.title"
      data-transition-role="img" :data-transition-id="post.slug" />
    <h1 class="text-xl lg:text-4xl text-center my-4"
      data-transition-role="title" :data-transition-id="post.slug">
        {{ post.title }}
    </h1>
</div>
</template>

// <script setup lang="ts">
import {
  useSharedElementTransition
} from '@/composables/experiments/sharedElementTransition';

definePageMeta({
  pageTransition: useSharedElementTransition()
})

Back Home