Text effect

ScrollTrigger Variable Font Marquee

by Vanguardia · motionprompts.dev

Four horizontal image marquees drift sideways as you scroll (gsap.fromTo on x driven by a scrubbed ScrollTrigger), while SplitType splits the interspersed word headings into characters whose variable fontWeight is tweened from 100 to 900 with a staggered, scrubbed ScrollTrigger. Lenis provides the smooth scroll that ScrollTrigger reads.

Type: Web motion
Framework: GSAP
Trigger: scroll
Duration: 0.5–1s

Save with a free account

Live demo ↗

Motion spec · measured by motionprompts.dev

Engine: gsap
Easing: none
Complexity: 3/5
Pinned: no
Reduced motion: not handled
Libraries: gsap, ScrollTrigger, SplitType, lenis

scrub-driven marquee drift with per-char weight wave; position is a pure linear function of scroll progress (ease:'none' + scrub:true), all smoothing comes from Lenis and scrub's default catch-up

The build prompt

From motionprompts.dev

Creator's promptVanguardia · motionprompts.dev21,129 chars

# ScrollTrigger Variable-Font Marquee — Weight Blooms as the Strips Drift

## Goal

Build an editorial scroll page whose centerpiece is a stack of four horizont…

The build prompt

More like this

A one-line prompt for an inference startup launch

UX Decision Explainer Animation

Motion Design Showreel Reaction Video

SaaS launch video for a product Opus picks

Product video for Distilbook

Squad.so SaaS Launch Video

Fresh recipes, every week.