View Transitions API

Resources

Documentation

• https://www.w3.org/TR/css-view-transitions-1/
• https://developer.chrome.com/docs/web-platform/view-transitions/
• https://developer.mozilla.org/en-US/docs/Web/API/View_Transitions_API

Other

• use-view-transitions for React
• Can I use View Transitions API? (single-document)

Blog posts

• https://www.bram.us/tag/view-transitions/
  • Rearrange / Animate CSS Grid Layouts with the View Transition API
• Getting started with View Transitions on multi-page apps

Videos

• YouTube: Scroll-Driven Animations & View Transitions | Bramus Van Damme | CSS Day (Members Only?)

Demos

• https://simple-set-demos.glitch.me/ - Multiple demos.
• https://live-transitions.pages.dev/ - Transition with playing video.
• https://nerdy.dev/text-replace-transitions - Text transitions.
• https://mdn.github.io/dom-examples/view-transitions/ - Mozilla basic demo.
• sitepoint.com introduction tutorial

CodePens

• Letter transitions
• Thumbnail transition effect
• Morphing multi-state button
• Periodic table
• Bento Radio Group Carousel

Demo sites

• https://books.zaps.dev/
• https://github.com/Charca/astro-view-transitions
• https://nuxt-view-transitions.surge.sh/
• Slideshow presentation

prefers-reduced-motion

Respect the user and don't display the transition animations if they are not wanted. This can be done with CSS or JavaScript.

/* CSS */
@media (prefers-reduced-motion: reduce) {
  *,
  ::before,
  ::after {
    animation-delay: -1ms !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    background-attachment: initial !important;
    scroll-behavior: auto !important;
    transition-duration: 0s !important;
    transition-delay: 0s !important;
  }
}

// JavaScript
window.matchMedia('(prefers-reduced-motion: reduce)').matches

More: https://web.dev/prefers-reduced-motion/