Scroll effect

Oversized Year, Counter-Scrolled

by Vanguardia · motionprompts.dev

A timeline where each era band carries an enormous four-digit year as a watermark behind its content, drifting AGAINST the scroll while the copy rises with it. One ScrollTrigger per band tweens the numeral on `xPercent` across the band's entire passage through the viewport (`top bottom` → `bottom top`, scrub 1), and the direction alternates band to band so consecutive years do not read as one long background pan. The numeral is `aria-hidden` at 7% opacity and the readable date lives in the copy: in front it stops being atmosphere and competes with the paragraph it dates. Each band clips horizontally because the numeral is deliberately wider than the viewport. Smoothed by Lenis; reduced motion parks every numeral centred. The demo is dressed as a Gotland ceramics studio: Vollkorn + Martian Mono, oat and kiln-black with an ember accent.

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

Save with a free account Customize for your product

Live demo ↗

Motion spec · measured by motionprompts.dev

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

per-band watermark numeral tweened on xPercent against the scroll across the band full passage (top bottom → bottom top, scrub 1), direction alternating band to band, while the band content rises with a power3.out entrance at top 72%

The build prompt

From motionprompts.dev

Creator's promptVanguardia · motionprompts.dev11,546 charsCustomize

# Oversized Year, Counter-Scrolled — the date as scenery, not as data

## Goal

Build a timeline where each era is one full-height band, and each band carries a…

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.