Animation Presets

View transition animation presets applied via data-vt-class. Click "Trigger" to see each preset using document.startViewTransition().

Note: These presets work with both MPA navigation (@view-transition) and SPA transitions (document.startViewTransition()). This demo uses the SPA API for inline previews.

Slide Left

data-vt-class="slide-left"

Content A

Slide Right

data-vt-class="slide-right"

Content A

Scale

data-vt-class="scale"

Content A

Fade

data-vt-class="fade"

Content A

None

data-vt-class="none"

Content A

Default (Crossfade)

No data-vt-class — browser default

Content A