Marquee

Seamless infinite scroll strip. Clones direct children until the track fills the container at least twice, then loops via GSAP modifiers. Optional drag-with-inertia.

GSAPScrollTriggerSplitTextFlipObserverInertiaDraggableMorphSVGDrawSVGMotionPath

Usage

import { Marquee } from '@bwo-ui/react';

<Marquee speed={120} direction="left" draggable>
  <span>One</span>
  <span>Two</span>
  <span>Three</span>
</Marquee>

Props

Prop	Type	Default	Description
`speed`	`number`	`80`	Pixels per second.
`direction`	`'left' \| 'right' \| 'up' \| 'down'`	`'left'`	Scroll direction.
`draggable`	`boolean`	`true`	Allow user to drag/throw the strip.
`pauseOnHover`	`boolean`	`true`	Pause when the cursor is over the strip.
`itemSelector`	`string`	`':scope > *'`	Selector for items inside the container.

Notes

The container is given overflow: hidden automatically.
For vertical marquees (direction="up" or "down"), give the container a height.
Items are cloned at mount; they are restored to the original container on destroy.