View Transitions API

A native-feeling example of the View Transitions API using Pokemon cards. Click on any Pokemon to see smooth transitions between grid and detail views.

Bulbasaur

GrassPoison

Charmander

Fire

Squirtle

Water

Pikachu

Electric

Clefairy

Fairy

Jigglypuff

NormalFairy

Meowth

Normal

Abra

Psychic

Geodude

RockGround

Gastly

GhostPoison

Onix

RockGround

Exeggcute

GrassPsychic

About View Transitions API

What is it?

The View Transitions API provides a way to create smooth transitions between different states of a page, making web apps feel more native and polished.

Key Features

Native-feeling transitions
Automatic handling of shared elements
Fallback support for older browsers
Customizable animations

How it Works

The API uses the view-transition-name CSS property to identify shared elements between states, then automatically animates them during transitions.

Browser Support

Currently supported in Chrome and other Chromium-based browsers. The API gracefully degrades in unsupported browsers.

Example Implementation

// Start a view transition
document.startViewTransition(() => {
  // Update the DOM
  setSelectedPokemon(pokemon);
});

// CSS for shared elements
.pokemon-card {
  view-transition-name: pokemon-card;
}

.pokemon-image {
  view-transition-name: pokemon-image;
}