View Transitions

Easily enable cross-page transitions on your Drupal site.

The View Transitions API provides an new way to transition between two DOM states, making Single-page application like transitions much easier to achieve. By default, when enabling this module users will see a smooth cross-fade when navigating between pages instead of a traditional full page refresh.

Or, configure the module to use an alternative transition animation from transition.css. The slide animation is shown below.

Examples are shown using the Umami demo, but the View Transitions module works with any theme.

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. 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.

Customizing Transitions

Transitions can be easily overridden via css in a theme or module.

• Creating a custom page transition