Methods
const sb = new SmoothBackground('.hero', options);
sb.play(); // resume
sb.pause(); // freeze on the current color
sb.toggle();
sb.goTo(2); // loop: animate to color 2 · scroll: scroll to its position · sections: scroll to section 2
sb.update({ duration: 800, colors: ['#000', '#fff'] }); // change options on the fly
sb.refresh(); // re-read sections and re-measure (after DOM changes)
sb.destroy(); // remove listeners and restore original inline styles
sb.index; // current color / section index
sb.progress; // scroll mode: 0 – 1
sb.isPlaying;
sb.element;
sb.options;
SmoothBackground.init(selector?, options?); // → instances[]
SmoothBackground.get(elementOrSelector); // → instance | null
SmoothBackground.version; // '2.0.0'
Creating a new instance on an element that already has one destroys the old instance first, so listeners are never duplicated.
The browser build also exposes the color helpers used internally: SmoothBackground.parseColor(), mixColors(), formatColor(), cubicBezier() and easings. The ESM and CJS builds export them as named exports.
Was this article helpful?
Thanks for your feedback!