View Transitions API

View Transitions

Lightweight, CSS-first transitions powered by the View Transitions API. Try the demos below — each interaction reveals a different animation technique.

View on GitHub

Live demos

Circular Reveal

View code

A radial clip-path expands from the click origin, sweeping the updated appearance into view.

Blur

Sweep Reveal

View code

The updated appearance sweeps in from the chosen edge.

Blur

Fall

View code

The current appearance drops off the bottom edge; the updated appearance is visible underneath right away.

Page turn

View code

The current appearance turns away like a book page, revealing the updated appearance underneath.

Install

View code

Add the package to your project. It ships the animation helpers and companion CSS for the View Transitions API.

Terminal

npm install @maxigarcia/view-transitions

User Guide

Circular reveal

View code

Call onCircularRevealAnimation with a callback that toggles the `dark` class. Pass the click event so a radial clip-path expands from the pointer and reveals the updated appearance.

CSS

@import '@maxigarcia/view-transitions/circular-reveal.css';

JavaScript

import { onCircularRevealAnimation } from '@maxigarcia/view-transitions';

button.addEventListener('click', (event) => {
  onCircularRevealAnimation(
    () => document.documentElement.classList.toggle('dark'),
    event,
  );
});

Sweep reveal

View code

Call onSweepRevealAnimation with a callback that toggles the `dark` class. Pick a sweep direction so the updated appearance slides in from an edge or corner.

CSS

@import '@maxigarcia/view-transitions/sweep-reveal.css';

JavaScript

import { onSweepRevealAnimation } from '@maxigarcia/view-transitions';

button.addEventListener('click', () => {
  onSweepRevealAnimation(
    () => document.documentElement.classList.toggle('dark'),
    'up',
  );
});

Fall

View code

Call onFallAnimation with a callback that toggles the `dark` class. The previous appearance drops off the bottom edge while the updated appearance appears underneath.

CSS

@import '@maxigarcia/view-transitions/fall.css';

JavaScript

import { onFallAnimation } from '@maxigarcia/view-transitions';

button.addEventListener('click', () => {
  onFallAnimation(() => document.documentElement.classList.toggle('dark'));
});

Page turn

View code

Call onPageTurnAnimation with a callback that toggles the `dark` class. The previous appearance turns away like a book page, revealing the updated appearance underneath.

CSS

@import '@maxigarcia/view-transitions/page-turn.css';

JavaScript

import { onPageTurnAnimation } from '@maxigarcia/view-transitions';

button.addEventListener('click', () => {
  onPageTurnAnimation(() => window.history.pushState(null, '', '/#page-1'));
});