Scroll effect

Nordquantique Scroll

by Vanguardia · motionprompts.dev

A scroll-driven pixelated block transition between full-bleed sections. Each image section is 200vh tall and overlaid with two grids of 4 rows x 16 blocks (top and bottom); a scrubbed ScrollTrigger per row maps scroll progress, plus a per-row delay and a gsap.utils.shuffle randomized per-block offset, to each block's opacity so the top blocks dissolve away to reveal the photo while the bottom blocks build up to cover it as the section scrolls through the viewport.

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: mixed
Complexity: 2/5
Pinned: no
Reduced motion: not handled
Libraries: gsap, ScrollTrigger

scrub-driven per-row, random-order block opacity dissolve — no GSAP tweens at all; ScrollTrigger.onUpdate writes inline opacity per block and a 250ms CSS opacity transition supplies all the easing

The build prompt

From motionprompts.dev

Creator's promptVanguardia · motionprompts.dev18,986 charsCustomize

# Pixelated Block Reveal Scroll

## Goal

Build a scroll-driven, full-bleed page where two editorial photo sections are each masked by a chunky grid of solid-co…

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.