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)