💫 Page Two 💫

You've successfully experienced the star-wipe transition!

Notice how the page wiped in through a star shape? Pretty cool, right?

🌟 Back to Page 1 🌟

✨ The Magic Sauce ✨

@view-transition {
  navigation: auto;
}

::view-transition-old(root) {
  animation: star-wipe-out 0.9s ease-in-out;
}

::view-transition-new(root) {
  animation: star-wipe-in 0.9s ease-in-out;
}

/* Required to keep old page visible during transition */
@keyframes star-wipe-out {
}

@keyframes star-wipe-in {
  from {
    clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%);
  }
  to {
    clip-path: polygon(calc(50vmin + 50vw - 50vmin) -300vmin, calc(188vmin + 50vw - 50vmin) -24vmin, calc(484vmin + 50vw - 50vmin) -24vmin, calc(244vmin + 50vw - 50vmin) 152vmin, calc(332vmin + 50vw - 50vmin) 424vmin, calc(50vmin + 50vw - 50vmin) 256vmin, calc(-232vmin + 50vw - 50vmin) 424vmin, calc(-144vmin + 50vw - 50vmin) 152vmin, calc(-384vmin + 50vw - 50vmin) -24vmin, calc(-88vmin + 50vw - 50vmin) -24vmin);
  }
}
Made by James Code