Project 12, Modern UI
View Transitions Gallery
Click any photo and watch it grow into the detail page. The browser animates between the two states for you, using the View Transitions API.
- Main API
- View Transitions
- Also uses
- History API
- Dependencies
- None
- Your browser
- Checking
Photo gallery
Click a photo to open it.
How it works
- Name the elementThe clicked photo gets view-transition-name: hero, and so does the big photo on the detail view.
- Swap the DOMThe page calls startViewTransition and changes the DOM inside the callback. The browser snapshots before and after.
- Let CSS animateThe browser morphs the named element between its two positions. Everything else cross-fades.
// Swap the view inside a transition
function open(photo) {
const img = document.querySelector(`[data-id="${photo.id}"] img`);
img.style.viewTransitionName = "hero"; // name it before
document.startViewTransition(() => {
img.style.viewTransitionName = "";
renderDetail(photo); // big <img> also has view-transition-name: hero
});
}
// CSS: ::view-transition-group(hero) { animation-duration: .45s; }