High-performance React marquee powered by GSAP

Intelligent container detection, seamless perfect looping, and buttery smooth animations. Add infinite scrolling to your apps in seconds.

GitHub

$pnpm add gsap-react-marquee

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

Advanced duplicate calculation ensures perfect infinite scrolling without any weird pixel gaps.

High Performance

Built with the legendary GSAP engine, meaning 60fps+ buttery smooth animations out of the box.

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 and scroll synchronization for a highly interactive end-user experience.

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 to customize your marquee completely.

Prop	Type	Default	Description
children	ReactNode	–	Content to render inside the marquee
className	string	–	Additional CSS classes for styling
dir	"left" \| "right" \| "up" \| "down"	"left"	Direction of the marquee movement
loop	number	-1	Number of loops (-1 = infinite)
paused	boolean	false	Whether the marquee animation should be 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	Whether the marquee should continuously fill the space
pauseOnHover	boolean	false	Pause the marquee when hovering
gradient	boolean	false	Enable gradient overlay (auto-adapts to orientation)
gradientColor	string	–	Color of the gradient if enabled (e.g. #0a0a0a)
spacing	number	16	Spacing between repeated elements in px
draggable	boolean	false	Enable dragging to scroll manually
scrollFollow	boolean	false	Sync marquee with page scroll direction
scrollSpeed	number	2.5	Speed factor when syncing with page scroll (max: 4, min: 1.1)

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.

Smart Target Sizing

The algorithm intelligently determines the exact space to fill and calculates the strict minimum duplicates required to terminate visual gaps seamlessly. Performance optimized with minimal DOM nodes created.

Recent Changelog

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