1. Docs
2. Animations
3. View Transitions

View Transitions

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

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;
}