gsap How is this smooth masonry/grid scrolling effect achieved?

[FalconG2001]

Hi everyone,

I'm trying to recreate the scrolling effect shown in the attached GIF.

The layout appears to be a grid/masonry-style gallery where:

• Images are arranged in multiple vertical columns.
• As the user scrolls, different columns seem to move at different speeds (parallax-like effect).
• The scrolling feels very smooth and cinematic.
• The grid remains aligned while creating depth and motion.
• It doesn't look like a traditional masonry layout that simply scrolls normally.

I'm trying to understand:

1. What is this effect generally called?
2. Is it implemented using CSS transforms, GSAP, Lenis, Framer Motion, Locomotive Scroll, or something else?
3. Are the columns individually translated based on scroll position?
4. Is there a common pattern for implementing this efficiently without hurting performance?
5. Does anyone have a complete example (React, Next.js, or even vanilla JS) that creates a similar effect?

Any explanations, code samples, GitHub repositories, CodePens, or tutorials would be greatly appreciated.

Thanks!

[Rodrigo]

Hi @FalconG2001 and welcome to the GSAP Forums!

 

That most likely is achieved using THREEJS and GLSL Shaders, you can use either ScrollTrigger or the Observer Plugin for that.

 

Here is a demo from our Demos Hub:

https://demos.gsap.com/demo/shader-on-scroll/

 

You can have a look at this collection of different shaders in order to find the effect you prefer:

https://real-world-shader.jankohlbach.com/

 

Finally this article in Codrops can help you getting started with this:
https://tympanus.net/codrops/2021/01/05/creating-an-infinite-auto-scrolling-gallery-using-webgl-with-ogl-and-glsl-shaders/

 

Here is the demo of that article:

https://codrops.com/Tutorials/InfiniteAutoScrollingGallery/

 

Hopefully this helps

Happy Tweening! 💚