Lifetime updates on every purchase Support replies within 24 hours Secure checkout via Gumroad 8,500+ sales since 2016

Methods

Updated 1 min read 3 views
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?