Scroll effect

Barrett & Hale Scroll Animation

by Vanguardia · motionprompts.dev

A wordmark ('Barrett & Hale'), centered on both axes of the viewport, rides its own fixed full-viewport layer painted with `mix-blend-mode: difference`, so it inverts against everything scrolling behind it — near-black over the paper client index, near-white over the dark stills. A second, un-blended copy of the same wordmark carries only the red ampersand so the accent never inverts. As each row of client names crosses the wordmark's band, two scrubbed ScrollTriggers animate the row's flex `gap` in px so the names spread apart around the title and close again. Reaching the tall footer section, further ScrollTriggers walk the wordmark's center line down the viewport and grow its type into a full-width title card over a sticky full-bleed photograph.

Type: Web motion
Framework: GSAP
Trigger: scroll
Duration: 0.3–0.3s

Save with a free account

Live demo ↗

Motion spec · measured by motionprompts.dev

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

row gaps scrub open 1em→15em then closed 15em→1em as each row passes a fixed wordmark, which then descends 50%→92% and grows 1.25vw→9vw over a 300vh sticky footer

The build prompt

From motionprompts.dev

Creator's promptVanguardia · motionprompts.dev23,955 chars

# Sticky Title Bar over Scrolling Logo List — Gap-Spread + Scale Scroll Animation

## Goal

Build a single-page editorial scroll experience. A **fixed wordmark*…

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.