Scroll effect

Mask Reveal On Scroll

by Vanguardia · motionprompts.dev

As each image row enters the viewport, a 3x3 grid of clip-path masks unveils the picture piece by piece: GSAP injects nine overlay divs per image and a ScrollTrigger timeline (start 'top 75%') animates their clip-path polygons from collapsed points to full cells in a diagonal wave (power2.out, 0.5s, staggered), producing a tiled mosaic reveal. Lenis drives smooth scrolling synced to ScrollTrigger.

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

Save with a free account Customize for your product

Live demo ↗

Motion spec · measured by motionprompts.dev

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

enter-triggered 3x3 clip-path mosaic reveal, diagonal wave

The build prompt

From motionprompts.dev

Creator's promptVanguardia · motionprompts.dev19,917 charsCustomize

# Mask Reveal On Scroll (3×3 clip-path mosaic image reveal)

## Goal
Build a long editorial gallery page where **every image reveals itself as a 3×3 grid of cli…

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.