
Building Infinite Scroll Galleries with GSAP and Three.js Shaders
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
Continue reading on Dev.to JavaScript
Opens in a new tab


