GSAP Marquee Demo
Left to Right (Speed: 0.5)
React
Vue.js
Svelte
JavaScript
TypeScript
Node.js
React
Vue.js
Svelte
JavaScript
TypeScript
Node.js
Right to Left (Speed: 1.0)
Design Tools
Figma
Adobe XD
Sketch
Framer
Design Tools
Figma
Adobe XD
Sketch
Framer
Fast Marquee (Speed: 2.0) - No Pause on Hover
🚀
âš¡
🎨
💻
🌟
🔥
✨
🎯
🚀
âš¡
🎨
💻
🌟
🔥
✨
🎯
Component Usage:
Basic Usage:
Item 1
Item 2
Item 1
Item 2
Parameters:
- items: Array of items (objects with content/class or strings)
- direction: "ltr" (left to right) or "rtl" (right to left)
- speed: Animation speed multiplier (0.5 = slow, 2.0 = fast)
- pauseOnHover: Boolean to pause animation on hover
- itemClass: CSS classes for individual marquee items
- containerClass: CSS classes for the marquee container
- duplicateCount: Number of times to duplicate items for seamless loop