Scroll-Driven Dynamic Marquee Frame

This is a Scroll-Driven Dynamic Marquee Frame. It creates a continuous perimeter ticker that bounds the viewport. Its function is to provide persistent context by reflecting the currently active section’s title. It transforms static reading into a reactive environment, updating both edge typography and core background colors as the user scrolls.

Specs

• Weight: ~80 KB (GSAP + ScrollTrigger).
• Performance: GPU-accelerated transforms (xPercent) with scrubbed scroll linkage.
• Theming: Dynamic via CSS Variables and HTML data-bg-color attributes.
• Responsiveness: Fluid typography using min(max()) for viewport scaling.
• A11y: Native interception of system motion preferences.

Anatomy

The architecture wraps standard flowing content in a fixed graphical cage.

• HTML (The Skeleton): A fixed .marquee-container holds four absolute-positioned .marquee nodes (top, right, bottom, left). The central <main> element houses sequential <section> tags with data-bg-color attributes.
• CSS (The Skin): Handles the geometric frame rotation using transform: rotate(). Typography scales automatically via mathematical functions (min(max(12px, 2vw), 22px)). CSS transitions manage the smooth background color cross-fades.
• JS (The Nervous System): GSAP ScrollTrigger observes section headings. Upon entry, it extracts the heading text, injects it into the four marquees, and overwrites the document’s --color-background variable.

Logic

The defining feature — the “Glyph-logic” — is the strict integration of accessibility directly into the animation pipeline. It does not treat a11y as an afterthought.

const prefersReducedMotion = window.matchMedia("(prefers-reduced-motion)");

if (!prefersReducedMotion.matches) {
  gsap.to(".marquee div", {
    scrollTrigger: { trigger: ".page-content", scrub: 0.25 },
    xPercent: -50
  });
}

Before initializing the heavy scrubbed animation or dynamic background flashes, the script queries the OS-level prefers-reduced-motion setting. If the user requests less motion, the script bypasses the GSAP timeline entirely, falling back to a static, readable frame.

Feel

Cinematic and enclosed. The text flows along the edges like a digital ticker tape, anchoring the user’s focus inward. The background color shifts are fluid, matching the pacing of the content. Because the marquee scrubbing is tied directly to the scroll wheel (scrub: 0.25), the interface feels mechanically linked to the user’s hand.