Starwipe.fun - A CSS View Transitions Demo

I built starwipe.fun as a playful demo of the CSS View Transitions API.

When I first heard about View Transitions, making a star wipe was the first thing that came to mind. I've looked around and couldn't find anyone who had done it, so I decided to make it myself.

Screenshot ofStarwipe.fun

The Tech

The magic happens with the CSS View Transitions API, which allows you to create smooth transitions between different states of a web page. No Javascript required!

/* Enable view transitions for navigation */
@view-transition {
  navigation: auto;
}

/* Style the old page during transition */
::view-transition-old(root) {
  animation: star-wipe-out 0.9s ease-in-out;
}

/* Style the new page during transition */
::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 {
}

/* The star wipe animation - expands from center point to full star */
@keyframes star-wipe-in {
  from {
    /* Start with a single point at the center */
    clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%);
  }
  to {
    /* Expand to a full 10-pointed star shape */
    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);
  }
}

Here's what each part does:

  • @view-transition { navigation: auto; } - Enables automatic view transitions for navigation events
  • ::view-transition-old(root) - Styles the old page during the transition
  • ::view-transition-new(root) - Styles the new page during the transition
  • star-wipe-out - Empty animation to keep the old page visible
  • star-wipe-in - The main animation that expands a center point into a full star shape using clip-path

The star shape is created using CSS clip-path with a polygon that forms a 10-pointed star pattern.

Why?

Why not? Sometimes the best demos are the ones that make you smile.

Check it out: starwipe.fun

Starwipe.fun - A CSS View Transitions Demo - James Keezer