View Transitions API: تبديل الوضع الليلي بدايرة بتكبرView Transitions API: a dark mode switch that grows as a circle

The View Transitions API is a browser interface that takes a snapshot of the page before a change and another after it, then lets you animate between the two with CSS or JavaScript. On this site I used it for the dark mode button: the new colour opens as a circle from the click point until it covers the screen. The whole thing is 12 lines with no library. Try the button in the bar above while you read.

The idea in one sentence

You call document.startViewTransition() and give it a function that changes the page. The browser does three things in order:

1. Takes a snapshot of the page as it is now.
2. Runs your function, so the real page changes.
3. Stacks the old snapshot and the new state as two pseudo-elements: ::view-transition-old(root) and ::view-transition-new(root).

By default the old one fades out and the new one fades in. We will cancel that and clip the new one to a growing circle.

The full code

This is the code running on this site, as is:

var R = document.documentElement;
var calm = matchMedia('(prefers-reduced-motion:reduce)').matches;

button.addEventListener('click', function (e) {
  var next = R.dataset.theme === 'dark' ? 'light' : 'dark';
  if (!document.startViewTransition || calm) return setTheme(next);

  var x = e.clientX, y = e.clientY;
  var r = Math.hypot(Math.max(x, innerWidth - x), Math.max(y, innerHeight - y));

  document.startViewTransition(function () { setTheme(next); }).ready.then(function () {
    R.animate(
      { clipPath: ['circle(0px at ' + x + 'px ' + y + 'px)',
                   'circle(' + r + 'px at ' + x + 'px ' + y + 'px)'] },
      { duration: 650, easing: 'cubic-bezier(.4,0,.2,1)',
        pseudoElement: '::view-transition-new(root)' }
    );
  });
});

setTheme is a plain function that changes data-theme on the html element and saves the choice.

Working out the radius

The circle has to grow until it reaches the screen corner farthest from the click, or part of the page stays uncovered.

Math.max(x, innerWidth - x) gives the longest horizontal distance (left or right), and the same for vertical. Math.hypot returns the hypotenuse of the two, which is exactly the distance to the farthest corner. The circle stops at the edge of the screen rather than beyond it, so the timing is right wherever the button sits.

The CSS line it will not work without

::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}

This cancels the default fade. Without it the old state fades while the circle grows and the result looks shaky. With it the old state sits still underneath, and the new one is revealed by the circle alone.

Why wait for .ready? Because the pseudo-elements only exist after the browser has taken both snapshots. Animate earlier and nothing moves.

Older browsers and reduced motion

One line handles both cases:

if (!document.startViewTransition || calm) return setTheme(next);

If the browser does not know the API, or the user has reduced motion turned on, the colour simply switches with no animation. The feature works for everyone and the motion is an extra for those who can see it. It is the first rule in my GSAP rules: content works even when motion does not.

Common mistakes

• Heavy work inside the callback. The page is frozen until the function finishes. Change one attribute and stop.
• A long duration. The page does not take clicks during the transition. 650 ms is enough, and more than a second makes the site feel slow.
• Forgetting regular transitions. If elements have a colour transition, they animate inside the new snapshot and spoil the effect. The snapshot must be in its final state.
• Using it everywhere. A move like this is good because it is rare. If every click triggers a full-screen transition, visitors get tired of it.

Want to learn web motion in order, from the basics to scroll and WebGL? That is what the GSAP web animation course covers.