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  }, []);

View transition theme animations

Tanstack DB in action

Reasons to Still Use Next.js from a TanStack Start Enjoyer

🎨 TanStack Start SSR-Friendly Theme Provider

View transition theme animations

Tanstack DB in action

Reasons to Still Use Next.js from a TanStack Start Enjoyer

🎨 TanStack Start SSR-Friendly Theme Provider

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

More posts

Tanstack DB in action

Reasons to Still Use Next.js from a TanStack Start Enjoyer

🎨 TanStack Start SSR-Friendly Theme Provider

More posts

Tanstack DB in action

Reasons to Still Use Next.js from a TanStack Start Enjoyer

🎨 TanStack Start SSR-Friendly Theme Provider

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