Class Marquee

Infinite marquee for horizontal or vertical looping content.

Wraps text nodes when needed and styles child elements for absolute looping
Auto-clones content to avoid visible gaps when cloneNodes is enabled
Advances via Raf and supports FPS-adjusted speed
Can pause on hover and while outside the viewport

Documentation

Hierarchy (View Summary)

Module<TC, TS, TM>
- Marquee

Index

Constructors

constructor

new Marquee(
    props: TModuleProps<
        IMarqueeCallbacksMap,
        IMarqueeStaticProps,
        IMarqueeMutableProps,
        Marquee,
    >,
): Marquee
Parameters
- props: TModuleProps<
      IMarqueeCallbacksMap,
      IMarqueeStaticProps,
      IMarqueeMutableProps,
      Marquee,
  >
Returns Marquee
Overrides Module.constructor
- Defined in src/components/Marquee/index.ts:69

Accessors

callbacks

get callbacks(): Callbacks<CallbacksMap, this>
Retrieves the module's callbacks instance.

Returns Callbacks<CallbacksMap, this>
Inherited from Module.callbacks
- Defined in src/base/Module/index.ts:64

coord

get coord(): number
The current marquee coordinate.

Returns number
- Defined in src/components/Marquee/index.ts:125
set coord(value: number): void
Parameters
- value: number
Returns void
- Defined in src/components/Marquee/index.ts:129

gap

get gap(): number
Marquee gap

Returns number
- Defined in src/components/Marquee/index.ts:151

isDestroyed

get isDestroyed(): boolean
Indicates whether the instance has been destroyed.

After destruction, destroy is a no-op.

Returns boolean
Inherited from Module.isDestroyed
- Defined in src/internal/Destroyable/index.ts:24

isVertical

get isVertical(): boolean
Check if the marquee is vertical

Returns boolean
- Defined in src/components/Marquee/index.ts:146

name

get name(): string
The name of the module, derived from the class name

Returns string
Inherited from Module.name
- Defined in src/base/Module/index.ts:57

prefix

get prefix(): string
Optional prefix for classnames used by the module

Returns string
Inherited from Module.prefix
- Defined in src/base/Module/index.ts:52

props

get props(): TRequiredProps<MutableProps & StaticProps>
Current properties. Do not mutate these directly, use updateProps instead.

Returns TRequiredProps<MutableProps & StaticProps>
Inherited from Module.props
- Defined in src/base/Module/index.ts:47

totalSize

get totalSize(): number
Total size of all elements in the marquee (width or height depending on direction)

Returns number
- Defined in src/components/Marquee/index.ts:113

totalWidth

get totalWidth(): number
Returns number
Deprecated
Use totalSize instead
- Defined in src/components/Marquee/index.ts:120

x

get x(): number
Returns number
Deprecated
Use coord instead
- Defined in src/components/Marquee/index.ts:137
set x(value: number): void
Parameters
- value: number
Returns void
- Defined in src/components/Marquee/index.ts:141

Methods

`Protected`_addTempClassName

_addTempClassName(element: Element, ...classes: string[]): void
Adds prefixed classes to an element and removes them on destroy.

Skips classes that are already present on the element.
Parameters
- element: Element
  Target DOM element.
- ...classes: string[]
  Unprefixed class name segments.
Returns void
Inherited from Module._addTempClassName
- Defined in src/base/Module/index.ts:139

`Protected`_cn

_cn(...classes: string[]): string
Builds one or more prefixed class names.
Parameters
- ...classes: string[]
  Unprefixed class name segments.
Returns string
Space-separated prefixed class string.
Inherited from Module._cn
- Defined in src/base/Module/index.ts:127

`Protected`_destroy

_destroy(): void
Stops playback, restores DOM, and removes container styles.

Returns void
Overrides Module._destroy
- Defined in src/components/Marquee/index.ts:204

`Protected`_emit

_emit<E extends keyof IMarqueeCallbacksMap>(
event: E,
arg: IMarqueeCallbacksMap[E],
): void
Emits a callback event with a fixed payload.
Type Parameters
- E extends keyof IMarqueeCallbacksMap
Parameters
- event: E
- arg: IMarqueeCallbacksMap[E]
Returns void
Inherited from Module._emit
- Defined in src/base/Module/index.ts:107

_getMutable

_getMutable(): {
    __mutableProp: true;
    adjustSpeed: boolean;
    centered: boolean;
    enabled: boolean;
    gap: string
    | number;
    pauseOnHover: boolean;
    pauseOnOut: boolean;
    speed: string | number;
}
Set default mutable props

Returns {
    __mutableProp: true;
    adjustSpeed: boolean;
    centered: boolean;
    enabled: boolean;
    gap: string | number;
    pauseOnHover: boolean;
    pauseOnOut: boolean;
    speed: string | number;
}
- __mutableProp: true
- adjustSpeed: boolean
  When need to use dynamic FPS factor to adjust the speed of the marquee.
  Default
  true
- centered: boolean
  Centers the marquee content within the container.
  Default
  false
- enabled: boolean
  Enables or disables the marquee animation. When false, the marquee will be paused.
  Default
  true
- gap: string | number
  The gap between the marquee elements. Supports css units like px, rem, vw, vh, svh.
  Default
  0
- pauseOnHover: boolean
  Pauses the marquee when the mouse hovers over it.
  Default
  false
- pauseOnOut: boolean
  Pauses the marquee when the element leaves the viewport.
  Default
  true
- speed: string | number
  The speed of the marquee animation. Supports css units like px, rem, vw, vh, svh.
  Default
  1
Overrides Module._getMutable
- Defined in src/components/Marquee/index.ts:50

_getStatic

_getStatic(): {
    __staticProp: true;
    cloneNodes: boolean;
    container: HTMLElement;
    direction: "horizontal"
    | "vertical";
    hasWillChange: boolean;
    resizeDebounce: number;
}
Get default static props

Returns {
    __staticProp: true;
    cloneNodes: boolean;
    container: HTMLElement;
    direction: "horizontal" | "vertical";
    hasWillChange: boolean;
    resizeDebounce: number;
}
- __staticProp: true
- cloneNodes: boolean
  Indicates whether to clone the marquee nodes. Can be set to false if DOM cloning is not preferred.
  Default
  true
- container: HTMLElement
  The container element that holds the marquee content.
- direction: "horizontal" | "vertical"
  Indicates the direction of the marquee animation.
  Default
  'horizontal'
- hasWillChange: boolean
  Determines whether to apply the will-change CSS property to the marquee elements to optimize rendering. Setting this to true may improve performance.
  Default
  true
- resizeDebounce: number
  The debounce delay for the resize event in milliseconds.
  Default
  0
Overrides Module._getStatic
- Defined in src/components/Marquee/index.ts:46

`Protected`_handleProps

_handleProps(props: Partial<IMarqueeMutableProps>): void
Syncs mutable props into RAF playback and recalculates layout.
Parameters
- props: Partial<IMarqueeMutableProps>
Returns void
Overrides Module._handleProps
- Defined in src/components/Marquee/index.ts:156

destroy

destroy(): void
Destroys the instance and runs all registered cleanup actions.

Safe to call multiple times; subsequent calls are ignored.

Execution order:
1. _destroy
2. all onDestroy callbacks, in registration order
3. isDestroyed is set to true
Returns void
Inherited from Module.destroy
- Defined in src/internal/Destroyable/index.ts:46

on

on<T extends keyof IMarqueeCallbacksMap>(
    target: T,
    listener: TCallbacksAction<IMarqueeCallbacksMap[T], Marquee>,
    settings?: ICallbacksSettings,
): () => void
Adds a custom callback to the module.
Type Parameters
- T extends keyof IMarqueeCallbacksMap
Parameters
- target: T
  The event type to listen for (e.g., 'props', 'destroy').
- listener: TCallbacksAction<IMarqueeCallbacksMap[T], Marquee>
  The function to execute when the event is triggered.
- settings: ICallbacksSettings = {}
  Additional settings for the callback.
Returns () => void
Inherited from Module.on
- Defined in src/base/Module/index.ts:190

onDestroy

onDestroy(action: () => void): void
Registers a function to run when the instance is destroyed.

If the instance is already destroyed, action runs immediately.
Parameters
- action: () => void
  Cleanup function (for example remove listeners or DOM classes).
Returns void
Inherited from Module.onDestroy
- Defined in src/internal/Destroyable/index.ts:64

render

render(stepProp?: string | number): void
Renders the marquee, adjusting element positions.
Parameters
- stepProp: string | number = ...
Returns void
- Defined in src/components/Marquee/index.ts:185

resize

resize(): void
Resizes the marquee, recalculating element positions and cloning if necessary.

Returns void
- Defined in src/components/Marquee/index.ts:166

updateProps

updateProps(props: Partial<IMarqueeMutableProps>): void
Change module's mutable properties
Parameters
- props: Partial<IMarqueeMutableProps>
Returns void
Inherited from Module.updateProps
- Defined in src/base/Module/index.ts:157

Class Marquee

Hierarchy (View Summary)

Index

Constructors

Accessors

Methods

Constructors

constructor

Parameters

Returns Marquee

Accessors

callbacks

Returns Callbacks<CallbacksMap, this>

coord

Returns number

Parameters

Returns void

gap

Returns number

isDestroyed

Returns boolean

isVertical

Returns boolean

name

Returns string

prefix

Returns string

props

Returns TRequiredProps<MutableProps & StaticProps>

totalSize

Returns number

totalWidth

Returns number

Deprecated

x

Returns number

Deprecated

Parameters

Returns void

Methods

Protected_addTempClassName

Parameters

Returns void

Protected_cn

Parameters

Returns string

Protected_destroy

Returns void

Protected_emit

Type Parameters

Parameters

Returns void

_getMutable

Returns { __mutableProp: true; adjustSpeed: boolean; centered: boolean; enabled: boolean; gap: string | number; pauseOnHover: boolean; pauseOnOut: boolean; speed: string | number;}

__mutableProp: true

adjustSpeed: boolean

Default

centered: boolean

Default

enabled: boolean

Default

gap: string | number

Default

pauseOnHover: boolean

Default

pauseOnOut: boolean

Default

speed: string | number

Default

_getStatic

Returns { __staticProp: true; cloneNodes: boolean; container: HTMLElement; direction: "horizontal" | "vertical"; hasWillChange: boolean; resizeDebounce: number;}

__staticProp: true

cloneNodes: boolean

Default

container: HTMLElement

direction: "horizontal" | "vertical"

Default

hasWillChange: boolean

Default

resizeDebounce: number

`Protected`_addTempClassName

`Protected`_cn

`Protected`_destroy

`Protected`_emit

Returns {
__mutableProp: true;
adjustSpeed: boolean;
centered: boolean;
enabled: boolean;
gap: string | number;
pauseOnHover: boolean;
pauseOnOut: boolean;
speed: string | number;
}

Returns {
__staticProp: true;
cloneNodes: boolean;
container: HTMLElement;
direction: "horizontal" | "vertical";
hasWillChange: boolean;
resizeDebounce: number;
}

`Protected`_handleProps