htmx:before:settle

Fires after DOM insertion, before settle tasks

The htmx:before:settle event fires after new content is inserted into the DOM but before CSS transitions are applied.

When It Fires

After the swap completes, right before htmx runs the settle phase (which applies CSS transitions and removes old attributes).

Event Detail

task - The swap task being settled
newContent - Array of newly inserted elements
settleTasks - Array of pending settle callbacks (e.g. CSS transition steps)

Example

htmx.on('htmx:before:settle', (evt) => {
  console.log('About to settle', evt.detail.newContent.length, 'element(s)');
  // Modify elements before transitions run
});

Licensed under the Zero-Clause BSD License.
https://four.htmx.org/reference/events/htmx-before-settle/