Events

Every callback receives a detail object:

{
  instance,  // SmoothBackground
  section,   // sections mode: the active section element
  index,     // current color index
  progress,  // scroll progress 0 – 1
  colors,    // rendered values, e.g. { 'background-color': 'rgb(212, 230, 106)' }
}

Callback	DOM event	When
onInit	vlt-sbg:init	Instance created.
onChange	vlt-sbg:change	A new color is reached (loop), the nearest color changes (scroll), or a new section becomes active (sections).
onUpdate	—	Every rendered frame in scroll mode. Delivered only as a callback, for performance.
onComplete	vlt-sbg:complete	loop: all iterations are done.
onDestroy	vlt-sbg:destroy	Instance destroyed.

DOM events bubble, so you can listen on a parent:

document.body.addEventListener('vlt-sbg:change', (e) => {
  console.log(e.target, e.detail.index);
});