Transition Modes

The View Transitions module offers two different modes which currently vary in their cross-browser support. They can be configured on the View Transitions Settings page (Administration > Configuration > User interface)

Single-Page Application Mode

Enables full page view transitions using client-side routing. This mode is currently enabled by default when installing the module. Inspired by Astro's View Transitions implementation.

When enabled, this mode uses HTMX's Boost feature to enable lightweight client-side routing on your Drupal site. This then allows view transitions to be applied to DOM elements on a single page, which currently has more widespread browser support. Browsers that currently do not support view transitions will use a fallback animation similar to a cross-fade.

Multi-Page Application Mode (Experimental)

Enables multi-page view transitions using server-side routing.

When enabled, view transitions are applied during traditional navigation that uses a full page refresh. This mode requires no additional JavaScript, and even works when JavaScript is completely disabled.

Browser support for this mode is currently substantially more limited. Support is gated behind the chrome://flags#view-transition-on-navigation in Chromium browsers. Browsers that do not support it will see a traditional page refresh.

If browser adoption expands, multi-page application mode will most likely become the default for this module.