Stacked Alternating Marquees
What it does
Four full-width marquee rows stacked with no gap, running continuously in ALTERNATING directions at non-harmonic speeds (26/34/30/22), each row inverting the palette so the opposition is visible at a glance. The rows also lean into the scroll: a single ScrollTrigger reads `getVelocity()` and feeds a push term that speeds each row up in its own direction, decaying at 0.92 per frame so stopping does not leave them racing. Written as one `gsap.ticker` loop rather than CSS `@keyframes` precisely because a CSS animation runs on its own clock and cannot know the scroll exists. The strip content is cloned once at runtime (the copy `aria-hidden`, so categories are not read twice) and the transform wraps at exactly half the measured width, re-measured on `load` and on `fonts.ready` because images change that width. Dressed as a print fair: Archivo Black + Syne Mono, teal, cream and red.
How it's built
| Category | scroll |
|---|---|
| Tech | gsap, lenis |
| GSAP plugins | ScrollTrigger |
| Complexity | section |
| Performance cost | light |
| Mobile-safe | yes |
| Scroll | hijacks scrolling |
Rebuild it with AI
This component's prompt is part of the paid library. Below you can read how it starts; the full prompt, the exact structure, timing and easing an AI agent needs to rebuild the effect, unlocks with any paid plan, yearly or lifetime.
# Stacked Alternating Marquees — rows that run opposite ways and lean into the scroll
## Goal
Build a block of **four full-width marquee rows stacked with no gap**, running continuously in
**alternating directions**, with the palette inverting row to row — and with the whole block
**leaning into the scroll**: scrolling speeds each row up in its own direction, and the push
decays when you stop.
Use it for a list of categories or claims that are read at a glance. If the reader has to
actually read and compare the items, this is the wrong mechanic and a list is the right one.
## Tech
Vanilla HTML/CSS/JS with ES modules: `gsap` + `ScrollTrigger`, and `lenis`.
Wire Lenis to ScrollTrigger — this is not optional:
```js
…Premium prompt
Unlock this prompt, and every other one
From $99/year, or $139 once for lifetime access. Commercial license included.
See pricing Or start with the free set Already bought? Sign in
New components in your inbox
One email a week, only when new components ship, each with its live demo and prompt.