Infinite Marquee with Mouse Control
Continuous scrolling marquees with mouse-based speed control. Rewind, pause, or fast-forward with cursor position. Uses GSAP quickTo for 60fps.
About This Effect
A production-ready infinite marquee system that responds to mouse movement in real time. Unlike basic CSS marquees, this implementation uses GSAP's quickTo method to achieve buttery-smooth 60fps speed changes as the cursor moves across the viewport. Move your mouse left to rewind, right to fast-forward, or hover in the center to pause — all with fluid easing transitions.
What's Included
- Continuous infinite loop with no visible seam or reset jump
- Mouse-position speed control — rewind, pause, and fast-forward
- GSAP quickTo for 60fps interpolated speed transitions
- Viewport-aware ticker that pauses when off-screen to save resources
- Multiple marquee rows with independent speeds and directions
- Lenis smooth scroll integration for seamless page scrolling
- Responsive design that adapts to any screen width
- Tap-to-pause on touch devices
- Clean destroy method for SPA compatibility
Perfect For
- Client logos and partner brand strips
- Testimonial and review tickers
- News headlines and announcement bars
- Portfolio project showcases
- Award and recognition displays
How It Works
The effect clones content elements to fill the viewport width, then uses GSAP's quickTo to animate translateX in a continuous loop. The wrap utility resets position seamlessly when elements scroll out of view. Mouse position is mapped to a speed multiplier, giving users intuitive control over the scroll direction and velocity.