Skip to main content

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 CodePen:

Default Marquee​

Reverse Marquee​

Draggable Marquee​

Scrollable Marquee​

Props​

Static Props​

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

container​

  • Type: HTMLElement
  • The container element that holds the marquee content.

resizeDebounce​

  • Type: number
  • Default: 0
  • The debounce delay for the resize event in milliseconds.

hasWillChange​

  • Type: boolean
  • Default: true
  • Determines whether to apply the will-change CSS property to the marquee elements to optimize rendering. Setting this to true may improve performance.

cloneNodes​

  • Type: boolean
  • Default: true
  • Indicates whether to clone the marquee nodes. Can be set to false if DOM cloning is not preferred.

Mutable Props​

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

speed​

  • Type: number | string
  • Default: 1
  • The speed of the marquee animation. Supports CSS units like px, rem, vw, vh, svh.

gap​

  • Type: number | string
  • Default: 0
  • The gap between the marquee elements. Supports CSS units like px, rem, vw, vh, svh.

enabled​

  • Type: boolean
  • Default: true
  • Enables or disables the marquee animation. When false, the marquee will be paused.

pauseOnHover​

  • Type: boolean
  • Default: false
  • Pauses the marquee when the mouse hovers over it.

centered​

  • Type: boolean
  • Default: false
  • Centers the marquee content within the container.

adjustSpeed​

  • Type: boolean
  • Default: true
  • When needed, uses dynamic FPS factor to adjust the speed of the marquee.

pauseOnOut​

  • Type: boolean
  • Default: true
  • Pauses the marquee when the mouse leaves the viewport.

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();