Use View Transitions API for Theme Toggle Animation

· 3 mins · Web

If you haven't heard about the View Transitions API, it's a new API that provides a mechanism for easily creating animated transitions between different website views. There are a few articles on the web about it already, here are some:

Since Safari will soon join the Chromium browser family to support the View Transitions API in version 18, so let's use its magic with the theme transition animation.

This animation takes inspiration from @hooray's snippets with some minor tweaks to avoid comflicting with Astro's View Transitions feature. You can find my implementation at ThemeToggle.vue, with some additional CSS rules as shown below:

.theme-transition::view-transition-old(root),
.theme-transition::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}
.theme-transition::view-transition-old(root) {
  z-index: 1;
}
.theme-transition::view-transition-new(root) {
  z-index: 9999;
}
.theme-transition.dark::view-transition-old(root) {
  z-index: 9999;
}
.theme-transition.dark::view-transition-new(root) {
  z-index: 1;
}

Feel free reach out if you have any suggestions. But now it's your turn to have fun with it!

> comment on threads / twitter
> cd ..