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()

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)