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.
• See demo

const marquee = new Marquee({
  container: document.getElementById('marquee'),
});

resizeDebounce

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

const marquee = new Marquee({
  resizeDebounce: 100,
});

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.

const marquee = new Marquee({
  hasWillChange: true,
});

cloneNodes

• Type: boolean
• Default: true
• Indicates whether to clone the marquee nodes.
• Cloned nodes are recreated dynamically on every resize() call, if the content is not long enough to form a seamless loop.
• In most cases clones are created during the initial setup, but on resize they may be recalculated and replaced.
• All cloned nodes are fully removed when the instance is destroyed using .destroy()
• See demo

const marquee = new Marquee({
  cloneNodes: true,
});

direction

• Type: 'horizontal' | 'vertical'
• Default: 'horizontal'
• Indicates the direction of the marquee animation.
• See demo

const marquee = new Marquee({
  direction: 'horizontal',
});

Mutable Props

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

Adaptive props

To apply different values by viewport or device, use Responsive with this component as the source. Props will update automatically when breakpoints change.

speed

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

const marquee = new Marquee({
  speed: 2,
});

// change value
marquee.updateProps({
  speed: '-1vw',
});

gap

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

const marquee = new Marquee({
  gap: '1vw',
});

// change value
marquee.updateProps({
  gap: 10,
});

enabled

• Type: boolean
• Default: true
• Enables or disables the marquee animation.
• When enabled: false, the internal requestAnimationFrame loop is paused, so the marquee stops updating.
• While disabled, the marquee keeps its current coord value — animation resumes from the same position.
• Hover-based control (pauseOnHover) is ignored when the marquee is disabled manually.
• See demo

const marquee = new Marquee({
  enabled: false,
});

// change value
marquee.updateProps({
  enabled: true,
});

pauseOnHover

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

const marquee = new Marquee({
  pauseOnHover: true,
});

// change value
marquee.updateProps({
  pauseOnHover: false,
});

centered

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

const marquee = new Marquee({
  centered: true,
});

// change value
marquee.updateProps({
  centered: true,
});

adjustSpeed

• Type: boolean
• Default: true
• When needed, uses a dynamic FPS factor to adjust the speed of the marquee for consistent animation across different screens with unique frame rates.
• See demo

const marquee = new Marquee({
  adjustSpeed: true,
});

// change value
marquee.updateProps({
  adjustSpeed: false,
});

pauseOnOut

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

const marquee = new Marquee({
  pauseOnOut: false,
});

// change value
marquee.updateProps({
  pauseOnOut: true,
});