Scroll effect

Lenis Smooth Scroll + ScrollTrigger

by Vanguardia · motionprompts.dev

A services list where each row's thumbnail expands from 30% to 100% width while the row itself grows in height as it scrolls into view. Lenis drives smooth scrolling synced to gsap.ticker, and two per-row scrubbed ScrollTrigger instances (created lazily via IntersectionObserver) read self.progress to tween the image width and row height with ease 'none'.

Type: Web motion
Framework: GSAP
Trigger: scroll
Duration: 0.1–0.25s

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, lenis

per-row scrubbed reveal: as each .service row crosses the viewport its thumbnail widens 30% -> 100% and the row itself grows 150px -> 450px, both linearly mapped from ScrollTrigger progress and then re-issued every frame as a 0.1s ease:'none' gsap.to(), so the geometry lags the scroll by a fixed ~100ms catch-up rather than tracking it rigidly

The build prompt

From motionprompts.dev

Creator's promptVanguardia · motionprompts.dev21,713 chars

# Lenis Smooth Scroll + ScrollTrigger — Expanding Service-Row Thumbnails

## Goal
Build a long, smooth-scrolling page with a full-screen photo hero, a black "Al…

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.