Back to articles
Building Infinite Scroll Galleries with GSAP and Three.js Shaders

Building Infinite Scroll Galleries with GSAP and Three.js Shaders

via Dev.to JavaScriptjjangik

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

Read Full Article
2 views

Related Articles