Base

<!-- Content slides in/out in different directions. -->
<main class="ui-transition-name-main">Slides up</main>
<main class="ui-transition-name-slide-up">Slides up</main>
<main class="ui-transition-name-slide-down">Slides down</main>
<main class="ui-transition-name-slide-start">Slides from left</main>
<main class="ui-transition-name-slide-end">Slides from right</main>

<!-- Scale effect for modals/cards, fade for subtle transitions. -->
<div class="ui-transition-name-scale">Scales in/out</div>
<div class="ui-transition-name-card">Card scales</div>
<div class="ui-transition-name-modal">Modal scales</div>
<div class="ui-transition-name-fade">Fades in/out</div>

<!-- Same element on both pages morphs (position/size interpolates). Use same class on source and target. -->
<!-- Page 1: thumbnail -->
<img class="ui-transition-name-hero" src="product.jpg">

<!-- Page 2: full image -->
<img class="ui-transition-name-hero" src="product.jpg">

<!-- Exclude an element from view transitions. -->
<div class="ui-transition-name-none">No transition</div>

<!-- View transitions snapshot elements, resetting scroll. Use `pagereveal` event to restore scroll before paint. -->
// Save scroll on navigation
link.addEventListener('click', () => {
  sessionStorage.setItem('scroll', sidebar.scrollTop);
});

// Restore before page reveals
window.addEventListener('pagereveal', () => {
  const saved = sessionStorage.getItem('scroll');
  if (saved) sidebar.scrollTop = parseInt(saved, 10);
});