Options

Updated Oct 6, 2026 1 min read 5 views

Option	Type	Default	Description
`mode`	`'loop' \| 'scroll' \| 'sections'`	`'loop'`	Animation mode.
`colors`	`Array<string \| object>`	4 pastel colors	Palette. See Colors.
`property`	`string`	`'background-color'`	Property animated by plain string colors.
`duration`	`number \| '1.5s' \| '300ms'`	`1500`	Transition between two colors (loop, sections).
`hold`	time	`1000`	loop: how long each color stays.
`delay`	time	`0`	loop: delay before the first transition.
`easing`	`string \| function`	`'ease-in-out'`	`linear`, `ease`, `ease-in`, `ease-out`, `ease-in-out`, `ease-in-sine`, `ease-out-sine`, `ease-in-out-sine`, `ease-in-out-cubic`, `ease-in-out-quint`, `ease-in-out-expo`, `cubic-bezier(a, b, c, d)` or `t => t`. In scroll mode, it applies to each segment between two colors.
`direction`	`'normal' \| 'reverse' \| 'alternate' \| 'random'`	`'normal'`	loop: color order.
`iterations`	`number`	`Infinity`	loop: number of full cycles.
`interpolation`	`'oklab' \| 'oklch' \| 'rgb'`	`'oklab'`	Color space for mixing.
`container`	`Element \| string \| window`	`window`	scroll, sections: the scrolling element.
`trigger`	`Element \| string`	`null`	scroll: element whose passage through the viewport drives progress.
`smooth`	`0 – 0.95`	`0.85`	scroll: inertia. `0` follows the scrollbar instantly.
`sections`	`string \| NodeList \| Element[]`	`'[data-sbg-section]'`	sections: section elements.
`threshold`	`0 – 1`	`0.5`	sections: activation line as a fraction of viewport height.
`activeClass`	`string \| null`	`'is-sbg-active'`	sections: class added to the active section. Per-section classes for the target come from `data-sbg-class`.
`pauseOffscreen`	`boolean`	`true`	loop: pause while the element is not visible.
`reducedMotion`	`'auto' \| 'ignore'`	`'auto'`	`'auto'` respects the user’s `prefers-reduced-motion` setting.
`autoplay`	`boolean`	`true`	loop: start immediately.
`onInit`, `onChange`, `onUpdate`, `onComplete`, `onDestroy`	`function`	`null`	See Events.

Global defaults live in SmoothBackground.defaults and can be changed before you create instances.

Was this article helpful?