Theme toggle effect

using view transitions api

github x (twitter)
click here to get all the css written for the following examples

this is literally all the javascript you need 

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

Here's some demos

Now you can write your css as you wish to

following is a simple example, that uses a circular mask

lets add a little blur to the svg

let's try to pivot the center of the circle to top left

see this is simple, now the skylimit is your imagination

we've seen all the svg mask animations, but we can use clip-paths too

the issue with using clip path is that you can't do much with it, like adding gradient or blur. so svg should be a good choice for most cases


lets see how can we improve the clip-path animation with a custom svg with linear gradient

we can use local assets too

here's the cool part

you can use gifs too

this one's good 😉

here are the two animation timing functions i'm using for the examples

thats basically it. you have enough context to build cool theme transitions with view transitions api

github x (twitter)

Used by