1. Docs
2. Motion
3. View Transitions

View Transitions 1.2.2

Harness the View Transitions API to smoothly morph elements between page states — with just CSS classes. Deutsch: View Transitions

When to use

• Same-document or MPA view transitions when the browser supports the API.
• Treat as progressive enhancement — not required for core UX.

When not

• Do not ignore prefers-reduced-motion for decorative motion.
• Do not use attention loops on large content regions — prefer CSS tokens + short durations.

Overview

VelinStyle provides utilities that set view-transition-name and pair with the browser's View Transitions API for seamless cross-page or SPA transitions.

Transition Names

Assign a view-transition-name with .velin-vt-name-*:

<!-- Page A -->
<img class="velin-vt-name-hero" src="thumb.jpg" alt="...">

<!-- Page B -->
<img class="velin-vt-name-hero" src="full.jpg" alt="...">

Morph

Elements sharing the same view-transition-name automatically morph between states when using the View Transitions API:

document.startViewTransition(() => {
  // Update the DOM — elements with matching
  // velin-vt-name-* classes will morph automatically
  updateContent();
});

Custom Transitions

::view-transition-old(hero) {
  animation: velin-fade-out 200ms ease-out;
}
::view-transition-new(hero) {
  animation: velin-fade-in 300ms ease-in;
}

Browser support

View Transitions remain stable CSS integration with VelinStyle helpers, but availability is browser-gated. Always degrade gracefully.