# 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.
Canonical: https://gsapvault.com/effects/infinite-marquee
Live demo: https://gsapvault.com/demos/infinite-marquee/index.html
| Property | Value |
|----------|-------|
| Type | effect |
| Tier | paid |
| Price | £5 |
| Difficulty | intermediate |
| Plugins | ScrollTrigger |
| Techniques | marquee, quickTo, wrap, viewport-aware-ticker |
| Uses Lenis | No |
## Overview
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.
## Features
- 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
## Use Cases
- Client logos and partner brand strips
- Testimonial and review tickers
- News headlines and announcement bars
- Portfolio project showcases
- Award and recognition displays
## Vibe-Code Ready Setup
This effect includes `START-HERE-AI.md`, a product-specific copy-paste setup prompt for Cursor, Claude Code, ChatGPT, GitHub Copilot, Windsurf, and other coding assistants. It tells the assistant to inspect the existing stack, integrate the supplied files, preserve the design, scope selectors, retain accessibility and responsive behaviour, add framework-appropriate GSAP cleanup, and report what it tested.
[How AI-assisted setup works](https://gsapvault.com/vibe-coding)
## 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.
## Integration Preview
How this effect integrates into a page. The full documentation (examples, events, programmatic API, customization guide) ships with the download.
### Quick Start
**1. Add to your HTML ``:**
```html
```
**2. Add a control surface and marquee to your ``:**
```html
Design✦Build✦Ship✦
```
The script clones `.marquee-inner`; do not manually duplicate the row.
**3. Add before the closing `` tag:**
```html
```
### Options
| Attribute | Values | Default | Description |
|---|---|---|---|
| `data-direction` | `left`, `right` | `left` | Resting direction for the row |
| `data-speed` | Positive number | `1` | Base speed multiplier for the row |
All marquees inside `.showcase-stage` share one pointer control surface. Moving over the left 40% rewinds, the middle 20% holds, and the right 40% accelerates. If no `.showcase-stage` exists, the document body becomes the control surface.
### Accessibility
- Reduced motion leaves every row visible and stationary.
- Cloned tracks receive `aria-hidden="true"`.
- Touch users can tap a row to pause it.
- Keyboard users can focus a row and press Enter or Space to pause or resume it.
- Keep a descriptive `aria-label` on each interactive marquee.
### Dependencies
- GSAP 3.14.2+
- ScrollTrigger
## What You Get
- `index.html`: working demo page
- `assets/script.js`: commented, readable source
- `assets/style.css`: effect styles
- `README.md`: full documentation with examples and framework integration notes
- `START-HERE-AI.md`: product-specific copy-paste prompt for AI-assisted setup
- `LICENSE.txt`: standard license terms
- Lifetime updates: re-download anytime from your library
## Get the Code
This is a premium effect. The standard license costs £5 one-time and covers unlimited personal and commercial projects with no attribution required. The only restrictions: no redistribution of the code itself and no competing effect libraries.
- [Buy Infinite Marquee with Mouse Control](https://gsapvault.com/effects/infinite-marquee)
- [Effects & Templates Vault (£39 one-time, best value): every current and future effect and template](https://gsapvault.com/effects)
## Judge the Code Quality First
These related effects are free with complete source published, written to the same production standard (cleanup functions, reduced-motion support, framework-agnostic):
- [Typewriter Text](https://gsapvault.com/effects/typewriter-text.md): A sharp terminal-style typewriter that types, holds, accelerates through deletion, and cycles to the next phrase in sync with cursor and progress signals.
- [Scroll Text Highlight](https://gsapvault.com/effects/scroll-text-highlight.md): A scrubbed orange-to-lime reading front lifts each active word before completed copy settles to white and unread copy remains ghosted.
---
From [GSAP Vault](https://gsapvault.com): production-ready GSAP animation effects. Full catalog for agents: https://gsapvault.com/llms-full.txt