Scroll effect

Fiddle Digital Scroll Animation

by Vanguardia · motionprompts.dev

A grid of editorial portraits scattered across a multi-column layout where each row's images scale up from 0 to full size as the row scrolls into the viewport, then the row pins and its images scale back down to 0 as it scrolls out. Per-row ScrollTrigger pairs (a scrub scaleIn from 'top bottom' to 'bottom bottom-=10%' and a pinned scaleOut from 'top top' to 'bottom top') drive gsap.set scale via onUpdate, with transform-origin swinging left/right per data-origin, all Lenis-smoothed.

Type: Web motion
Framework: GSAP
Trigger: scroll

Save with a free account Customize for your product

Live demo ↗

Motion spec · measured by motionprompts.dev

Engine: gsap+raf
Complexity: 3/5
Pinned: yes
Reduced motion: not handled
Libraries: gsap, ScrollTrigger, lenis

Zero-tween scrub component: per-row, images scale 0→1 linearly as the row enters the viewport (progress clamped by a 1.2x fudge so they finish early, snapped to 1 past 0.95), then the row pins at top top and the images scale 1→0 linearly while pinned. All smoothing comes from scrub:1 alone — there is no ease anywhere. Scale is corner-anchored: transform-origin alternates 0% 0% / 100% 0% via data-origin, so images grow and collapse toward their outer corner rather than their centre.

The build prompt

From motionprompts.dev

Creator's promptVanguardia · motionprompts.dev13,896 charsCustomize

# Scroll-Scaling Editorial Image Grid

## Goal

Build a full-page scroll gallery: a dark editorial grid of portraits arranged in 10 four-column rows, where each…

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.