Understand swap and settle

An HTMX update moves through phases you can see in the DOM. Knowing them helps you style transitions and debug timing.

The sequence looks like this:

1. the request starts and htmx-request marks the trigger or indicator
2. the response arrives and htmx-swapping marks the target
3. new content receives htmx-added
4. the target gets htmx-settling while attributes and transitions finish
5. temporary classes are removed

The default swap delay is 0ms. The default settle delay is 20ms. Change them only when you want a coordinated transition:

<div hx-get="/notice" hx-swap="innerHTML swap:100ms settle:200ms">
  Load notice
</div>

Events follow the same boundary. htmx:afterSwap runs after insertion. htmx:afterSettle runs after settling completes. If you move focus or measure layout, afterSettle is usually the safer hook.

Use CSS to explain state, not disguise slow work. A short fade can show that content changed. It cannot replace a “Saving…” indicator or an error message. Respect prefers-reduced-motion and keep the final DOM correct when transitions are disabled.

My advice: slow the request in DevTools Network throttling, open the Elements panel, and watch the classes appear and disappear. When something feels jumpy or late, the lifecycle classes tell you which phase is wrong.

The htmx-added class is useful when you want an entrance animation on fresh content only, not on the whole target. Style .htmx-added with a short keyframe and let HTMX remove the class after settle.

Try this on your own project: add a one-line CSS rule for .htmx-swapping { opacity: 0.6 } on a task list, trigger a swap, and confirm the class clears after the update finishes. If the class sticks, check for JavaScript errors during afterSettle.