Marquee

A custom marquee component that smoothly scrolls its child elements.

This component is designed to loop elements horizontally within a container, with support for customization such as speed, gap, pause on hover, and more.

Examples

Explore live examples in CodeSandbox:

Default Marquee

Draggable Marquee

Scrollable Marquee

Props

Static Props

Static properties are set during initialization and cannot be modified later.

Name	Description	Type	Default Value
container	The container element that holds the marquee content.	HTMLElement
resizeDebounce	The debounce delay for the resize event in milliseconds.	number	0
hasWillChange	Determines whether to apply the will-change CSS property to the marquee elements to optimize rendering. Setting this to true may improve performance.	boolean	true
cloneNodes	Indicates whether to clone the marquee nodes. Can be set to false if DOM cloning is not preferred.	boolean	true

Mutable Props

Mutable properties can be updated at runtime using .updateProps().

Name	Description	Type	Default Value
speed	The speed of the marquee animation. Supports css units like px, rem, vw, vh, svh.	number | string	1
gap	The gap between the marquee elements. Supports css units like px, rem, vw, vh, svh.	number | string	0
enabled	Enables or disables the marquee animation. When false, the marquee will be paused.	boolean	true
pauseOnHover	Pauses the marquee when the mouse hovers over it.	boolean	false
centered	Centers the marquee content within the container.	boolean	false
adjustSpeed	When need to use dynamic FPS factor to adjust the speed of the marquee.	boolean	true
pauseOnOut	Pauses the marquee when the mouse leaves the viewport.	boolean	true

Accessors

note

All Module's accessors are available in this class.

totalWidth

Type: number

Total width of all elements in the marquee

x

Type: number

The current X coordinate of the marquee.

Methods

note

All Module's methods are available in this class.

render

Renders the marquee, adjusting element positions.

instance.render(2); // with step 2
instance.render(-1); // with step -1

resize

Resizes the marquee, recalculating element positions and cloning if necessary.

instance.resize();

updateProps

Dynamically updates instance properties.

instance.updateProps({
  enabled: false,
});

destroy

Destroys the instance and cleans up resources.

instance.destroy();

Callbacks

note

All Module's callbacks are available in this class.

render

Called during marquee rendering.

const destruct = instance.on('render', () => console.log('render'));

// Cancel the callback
destruct();

resize

Called on marquee resize

const destruct = instance.on('resize', () => console.log('resize'));

// Cancel the callback
destruct();