Back to Gallery
Infinite Marquee with Mouse Control
£5 Standard License Unlimited projects
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 responsive infinite marquee system that turns pointer position into real-time playback control. GSAP quickTo smooths the shared velocity as visitors move from rewind through a center hold zone to full speed, while alternating rows preserve their own direction and pace.
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
- Shared control surface for coordinated multi-row compositions
- Responsive design that adapts to any screen width
- Tap-to-pause and keyboard controls
- GSAP context cleanup 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
Each marquee track is cloned once and advanced by a viewport-aware GSAP ticker. gsap.utils.wrap keeps the translation inside one track width for a seamless loop, while quickTo eases a shared velocity object toward the pointer-derived target. Pointer position maps to reverse, hold, and forward zones; touch and keyboard controls can pause individual rows.
Plugins ScrollTrigger
Difficulty Intermediate
Includes HTML + JS + CSS source, documentation, AI setup prompt, lifetime updates
