Shared Element Transitions

I was just Hoping for Better Native Page Transitions, and Bramus commented that Chrome is working on something. Looks like it has some fresh enthusiasm for it, as there is a brand new repo, and you can literally test it in Chrome Canary.

Would you like to add navigation transitions to your site without making your site an SPA? Then give this issue a thumbs-up: https://t.co/iEv7lV5u27

— Jake Archibald (@jaffathecake) April 26, 2021

The repo is moved over here, and I love the name. “Shared elements” is clutch here. It’s not just like a slide-out, slide-in, or a star wipe, it’s being able to move individual elements to new places. Shawn pointed out that Sarah’s article makes this ability super clear:

🔥 I hear *a lot* from people who would like to create native-like animations on the web, so I made a write-up && demos on how to achieve them! Made w/ @vuejs and @nuxt_js! Can't wait to see what you all make!

📝 article: https://t.co/K0Q3JtR0hD
🚀 demo: https://t.co/kBaaGm580Q pic.twitter.com/YXy756E6rg

— Sarah Drasner (@sarah_edo) April 23, 2018

I’ll drop the code snippet from the current README here as its really cool:

<style>
#e1, #e2, #e3, #newE1, #newE2, #newE3 {
  contain: paint;
}
</style>
...
<script>
function handleTransition() {
  document.documentTransition.prepare({
    rootTransition: "reveal-left",
    duration: 300,
    sharedElements: [e1, e2, e3]
  }).then(() => {
    changeBodyBackground();
    document.documentTransition.start({ sharedElements: [newE1, newE2, newE3] }).then(
      () => console.log("transition finished"));
  });
}
...
</script>

Note you don’t have to deal with updating the URL or anything, that would just automatically happen (I guess?).

While I was chatting about this, Alex Riviere pointed out to me that pre-Chromium Edge had (proprietary) page transitions:

<meta http-equiv="Page-Enter"
      content="RevealTrans(Duration=0.600, Transition=6)">

Whaaaat. Christian Schaefer has a post lamenting what we lost when we lost Trident:

As the name implies, such a filter would smoothly transition the user from page to page upon navigation, instead of having pages appear as abruptly as we are used to. There was an extensive list of transition filters you could choose from by referencing them via number:

Wipe up, wipe down, random dissolve, split horizontal out, etc. No star wipes though, incredibly. And definitely no “shared element transitions”

---

The post Shared Element Transitions appeared first on CSS-Tricks.

You can support CSS-Tricks by being an MVP Supporter.

source https://css-tricks.com/shared-element-transitions/