View transition theme animations

Add cool effect when trnsitionning from light to dark mode using css and view transitions

copied from @jhey on twitter

>Note

This assumes you've already have your dark light mode setup with some sort of function to update your theme

Add the css

css

1  /* Angled */
2  [data-style='angled']::view-transition-old(root) {
3    animation: none;
4    z-index: -1;
5  }
6
7  [data-style='angled']::view-transition-new(root) {
8    animation: unclip 1s;
9    clip-path: polygon(-100vmax 100%, 100% 100%, 100% -100vmax);
10  }
11
12  @keyframes unclip {
13    0% {
14      clip-path: polygon(100% 100%, 100% 100%, 100% 100%);
15    }
16  }
17

ensure data-style="angled" attribute is set on the root element in SPA react we use a useEffect hook

tsx

1  useEffect(() => {
2    // set the data-style attribute
3    document.documentElement.dataset.style = "angled";
4  }, []);

in SSR it can be set directly in the html tag

wrap your theme change function in a documnet.startViewTransition to start the view transition

typescript

1  function transitionColors() {
2    if (typeof window !== "undefined") {
3      document.startViewTransition(() => {
4        const newTheme = theme  === "light" ? "dark" : "light";
5        document.documentElement.dataset.theme = newTheme;
6        updateTheme(newTheme);
7      });
8    }
9  }
10

more transition styles can be added by including the corresponding css file and adding the correct data-style attribute

tsx

1      <select
2      className="select select-bordered select-sm max-w-xs"
3        onChange={(e) =>
4          (document.documentElement.dataset.style = e.target.value)
5        }
6      >
7        <option value="default">Default</option>
8        <option value="vertical">Vertical</option>
9        <option value="wipe">Wipe</option>
10        <option value="angled">Angled</option>
11        <option value="flip">Flip</option>
12        <option value="slides">Slides</option>
13      </select>

react example

If you like this type of css tricks consider following jhey

View transition theme animations

Setting up vector search for github starred repos

Live activity bus (Elysia SSE + pub/sub powered by nodejs event emitter)

Queues and workflows with conveyor

View transition theme animations

Setting up vector search for github starred repos

Live activity bus (Elysia SSE + pub/sub powered by nodejs event emitter)

Queues and workflows with conveyor

Add cool effect when trnsitionning from light to dark mode using css and view transitions

More posts

Setting up vector search for github starred repos

Live activity bus (Elysia SSE + pub/sub powered by nodejs event emitter)

Queues and workflows with conveyor

More posts

Setting up vector search for github starred repos

Live activity bus (Elysia SSE + pub/sub powered by nodejs event emitter)

Queues and workflows with conveyor

Add cool effect when trnsitionning from light to dark mode using css and view transitions