Building Infinite Scroll Galleries with GSAP and Three.js Shaders

jjangik — Wed, 01 Apr 2026 03:14:33 +0000

I've been experimenting with infinite scroll gallery interactions —
the kind you see on Awwwards-winning sites — and built two
components I wanted to share.

1. Infinite 2D Grid

An omnidirectional infinite grid. Scroll or drag in any direction
and the cards wrap seamlessly. Each card has position-based inner
parallax, and clicking any card triggers a fullscreen expansion
with animated border radius.

Live Demo: https://infinite-2d-grid-scroll.netlify.app

Key technical details:

DOM + CSS translate3d with modular wrapping on both axes
Position-based inner parallax (image offset based on card's screen position)
Off-screen culling for performance
Mobile: 1:1 touch drag bypassing lerp for instant response
GSAP timeline for fullscreen detail expansion

2. Infinite Horizontal Scroll Gallery

A Three.js-powered gallery with curved depth. Three rows scroll
at different speeds. The interesting part: cards expand to
fullscreen via a custom vertex shader.

Live Demo: https://infinite-scroll-horizontal-gallery.netlify.app

The shader uses a uCorners vec4 uniform — each corner (TL, TR,
BL, BR) animates independently from 0 to 1, with randomized
stagger. The vertex shader interpolates between the card's curved
state and a fullscreen state using bilinear interpolation:

float cornersProgress = mix(
  mix(uCorners.z, uCorners.w, uv.x),
  mix(uCorners.x, uCorners.y, uv.x),
  uv.y
);
gl_Position = projectionMatrix * viewMatrix * 
  mix(defaultState, fullScreenState, cornersProgress);

This means every time you click a card, the expansion looks
slightly different.

Both galleries include:

Responsive design (desktop + mobile)
Loading progress bar
Configurable via 40+ variables in a CONFIG section
No build tools — open index.html and it works

I packaged these as a product on
Gumroad
for anyone who wants to use them in their projects.

Would love to hear what you think about the interactions!

DEV Community: jjangik

Building Infinite Scroll Galleries with GSAP and Three.js Shaders

1. Infinite 2D Grid

2. Infinite Horizontal Scroll Gallery

Both galleries include: