High-performance React marquee powered by GSAP

Horizontal and vertical marquees, fill mode, drag, scroll-follow, and GSAP-powered animation with TypeScript support.

$pnpm add gsap-react-marquee gsap @gsap/react

Everything you need

A comprehensive set of features to build the perfect auto-scrolling marquee for any use case.

Intelligent Detection

Automatically detects whether containers have fixed dimensions or adapt to content, preventing recursive expansion loops.

Seamless Looping

Duplicate calculation creates a continuous loop while keeping the rendered DOM small.

High Performance

Built on GSAP timelines with ResizeObserver-based re-measurement for responsive content.

Flexible Directions

Supports horizontal (left/right) and vertical (up/down) scrolling with built-in orientation handling.

Smart Gradients

Optional gradient overlays automatically adapt and position themselves based on marquee scroll direction.

Interactive Controls

Built-in drag support, pause-on-hover, scroll synchronization, and forwarded refs.

Interactive Examples

Check out some of the common use cases and configurations.

BASIC MARQUEE SCROLLING

App.tsx

<Marquee dir="left" speed={50}>
  <div className="...">Scrolling text goes here</div>
</Marquee>

Full API Playground

Experiment with every available property and instantly copy the generated code.

Playground.tsx

<Marquee
  dir="left"
  speed={250}
  spacing={32}
>
  <div className="text-4xl md:text-6xl font-black text-primary uppercase whitespace-nowrap px-8">
    GSAP REACT MARQUEE
  </div>
</Marquee>

GSAP REACT MARQUEE

API Reference

A complete list of props for gsap-react-marquee v0.3.2.

Prop	Type	Default	Description
children	ReactNode	Required	Content rendered inside each marquee item
className	string	undefined	Class applied to each .gsap-react-marquee-content element
dir	"left" \| "right" \| "up" \| "down"	"left"	Direction of movement
loop	number	-1	Number of timeline repeats (-1 = infinite)
paused	boolean	false	Starts the timeline paused
delay	number	0	Delay before the animation starts (in seconds)
speed	number	100	Speed of the marquee animation in px/s
fill	boolean	false	Repeats content enough times to cover the measured marquee area
pauseOnHover	boolean	false	Pauses on pointer hover and resumes on leave
gradient	boolean	false	Enables edge gradient overlays
gradientColor	string	undefined	Explicit gradient color. Overrides automatic background detection
spacing	number	16	Gap between marquee items, in pixels
draggable	boolean	false	Enable dragging to scroll manually
scrollFollow	boolean	false	Adjusts timeline speed from wheel/scroll direction
scrollSpeed	number	2.5	Scroll-follow multiplier. Clamped between 1.1 and 4

Advanced Under the Hood

Intelligent Detection

The component automatically detects container dimensions to prevent recursive expansion. For fixed width containers, it uses those dimensions. For auto-width, it gracefully falls back to viewport dimensions with a hard limit of 15 duplicates to stop performance issues safely.

Orientation-Aware

GSAP React Marquee naturally adapts its animation rules depending on direction. left/right uses xPercent optimizations whereas up/down binds securely to yPercent with flex column structures. Gradient overlays position themselves perfectly based on the flow.

Runtime Ready

The package injects its base CSS from the bundled entrypoint, forwards refs to the root container, and re-measures after resize or image load events. In Next.js, import and render it from a client component because it uses DOM measurement and layout effects.

Recent Changelog

v0.3.2

Latest: Peer dependencies are explicit: gsap and @gsap/react

Runtime notes for Next.js client components

Forwarded ref documented for the root container

Updated sizing, styling, and troubleshooting docs

v0.3.0

🎨 BREAKING: Removed alignVertical prop. Vertical uses native flex.

✨ Added proper Y-axis animations (up/down)

🎨 Smart gradient overlays adapt to orientation

🔧 Refactored animation engine for X & Y

v0.2.4

✨ Intelligent container detection

🚀 Enhanced duplicate calculation algorithm

🔧 Smarter target width looping logic

🛡️ Added max limit to prevent perf issues