Building Infinite Scroll Galleries with GSAP and Three.js Shaders

#threejs #webdev #javascript

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);