Layout · 7.3
Seamless infinite marquee
A ticker tape. And in the velocity variant, a tape being yanked.
A row of content scrolling horizontally forever with no visible seam or jump.
4 knobs
How it actually works
The base case is free. It is two keyframes and no JavaScript, running on the compositor, and it will outlive every framework on this page. Then you add one velocity coupling and it stops being a ticker and becomes a feel.
CSS-only: duplicate the track and translate it by exactly -50% of its width in a keyframe loop. That exact figure is what makes the loop seamless, because at -50% the second copy is precisely where the first one started. The velocity variant adds skewX driven by scroll velocity; counter-rotating skewed bands give the page-tearing quality.
The knobs, named
Speed, direction, skew-per-velocity gain, band count. Speed is sourced at 1 being roughly 100 pixels per second.
| Knob | Source | What it teaches |
|---|---|---|
| Speed | sourced | The source's unit: 1 is about 100px/sec. Zero is a legitimate setting and looks fine, which is worth knowing. |
| Direction | sourced | Alternating bands is what stops a marquee reading as a mistake. |
| Skew per velocity | sourced | The velocity coupling. Scroll this page hard with it at 0.8 and the bands tear. |
| Band count | sourced | How many rows. The offset between them is what makes it a texture rather than a line. |
sourced means the source names this parameter. ours means the source names none and the knob is our design against the mechanism. No knob here is invented and passed off as sourced.
Evidence
INFERRED
GSAP CodePen GRweYYJ; Awwwards "Text Marquee" collection; Codrops "On-Scroll Text Repetition Animation". The -50% duplication is standard and solid; the index marks the velocity-skew coupling explicitly unverified, and we do not upgrade it.
- Seen on
- GSAP CodePen; Awwwards "Text Marquee" collection.
- Dependencies
- vanilla CSS is fully viable. GSAP buys programmatic control (pause/reverse/rebuild) that snippets note is "very difficult to achieve with CSS".
- Difficulty
- trivial (CSS) to moderate (GSAP with pause-on-hover)
- Performance
- The CSS version is compositor-only and free.
- Accessibility and the floor
- A duplicated track means screen readers read it twice, so the clone is aria-hidden. WCAG 2.2.2: motion over 5 seconds needs a pause mechanism, so there is a real pause button on the stage, not just a knob at zero. Under reduced motion it holds still and stays readable.
Notes
Composability. The skew gain is 1.4's velocity signal wearing a hat. Turn the gain to 0 and this is the pure CSS version, free forever.