View Transitions Integration: hx-swap="transition:true" Animation Coordination
- Last updated
- Prerequisites:
- Browser View Transitions API (`document.startViewTransition`)
- HTMX hx-swap
- htmx
- view-transitions
- animation
- transition-true
- css
- morphing
Read at your depth
The practical view
HTMX natively integrates with the browser's View Transitions API. By adding the `transition:true` modifier to `hx-swap` (e.g. `hx-swap="innerHTML transition:true"`), HTMX wraps the DOM mutation inside `document.startViewTransition()`. You can then customize the animation using standard CSS pseudo-elements like `::view-transition-old(root)` and `::view-transition-new(root)`.
The same idea in other frameworks
`document.startViewTransition(() => flushSync(() => setTab('tab2')))`.Angular Router `withViewTransitions()` enabled.Vue Router `document.startViewTransition()` wrapper inside navigation guards.`<button hx-get="/next" hx-swap="innerHTML transition:true">`.Legacy vs modern
Abrupt Content Snap vs Smooth View Transition Morph
Standard swaps snap instantly; `transition:true` utilizes browser GPU snapshots for seamless animated transitions.
<div hx-get="/details" hx-swap="innerHTML"> // ❌ Snaps instantly without visual connection<button hx-get="/details" hx-swap="outerHTML transition:true"> // ✅ NEW: Smooth morphing animationInterview gotchas
Context
Interviewers test your knowledge of HTMX global configuration flags.
The mechanical answer
Set the global configuration flag in JavaScript: **`htmx.config.globalViewTransitions = true;`**. This automatically wraps every `hx-swap` operation across the entire application in `document.startViewTransition()` whenever supported by the client browser.
Trap
If using `globalViewTransitions = true`, ensure your CSS doesn't accidentally assign duplicate `view-transition-name` properties to multiple elements simultaneously, or the transition will fail.
Context
Checks knowledge of browser View Transitions API constraints.
The mechanical answer
The W3C View Transitions spec strictly requires that **`view-transition-name` values must be unique on the page at any given moment**. If two active elements share the same `view-transition-name` (e.g. `view-transition-name: card`), the browser aborts the view transition entirely and performs an instant non-animated DOM swap.
Trap
Never assign static `view-transition-name: item` to items in a list loop; dynamically assign unique names (e.g. `style="view-transition-name: item-101"`).