htmx:before:viewTransition

View as MarkdownOpen this page as Markdown
For LLMs
llms.txthtmx overview for LLMs
llms-full.txtComplete htmx docs for LLMs

Fires before view transition starts

On this page

The htmx:before:viewTransition event fires before a View Transition starts (if browser supports View Transitions API and htmx.config.transitions is true).

When It Fires

Before the swap operation begins its view transition animation.

Fires on the element that triggered the swap, or on document when there is none.

Event Detail

  • task - Transition callback function. Replace it to wrap the transition.
  • ctx - The request context driving the swap

Example

htmx.on('htmx:before:viewTransition', (evt) => {
  console.log('Starting view transition');
  // Customize transition behavior
});

Replace detail.task to run your own work around the transition. The replacement is awaited in place of the original:

htmx.on('htmx:before:viewTransition', (evt) => {
  let task = evt.detail.task;
  evt.detail.task = async () => {
    await prepare(evt.detail.ctx);
    await task();
  };
});