GIF studio

Wipe between two GIFs

Pick a GIF, tune duration and mask size, play it on the real View Transitions API, then copy the CSS or share the URL.

Live page

Theme

Play toggles light and dark on this surface. The GIF is only the mask.

CSS

 ::view-transition-group(root) {
  animation-timing-function: var(--expo-in);
}

::view-transition-new(root) {
  mask: url('') center / 0 no-repeat;
  animation: scale 3s;
  animation-fill-mode: both;
}

::view-transition-old(root),
.dark::view-transition-old(root) {
  animation: none;
  z-index: -1;
}

@keyframes scale {
  0% {
    mask-size: 0px;
  }
  10% {
    mask-size: 50vmax;
  }
  90% {
    mask-size: 50vmax;
  }
  100% {
    mask-size: 2000vmax;
  }
}

Play

 if (!document.startViewTransition) switchTheme()
document.startViewTransition(switchTheme);