Parallax Grid Scroll

A grid where two columns scroll in oposite directions, giving a parallax effect.

thumbnail
thumbnail
thumbnail
thumbnail
thumbnail
thumbnail
thumbnail
thumbnail
thumbnail
thumbnail
thumbnail
thumbnail
thumbnail
thumbnail
thumbnail
thumbnail
thumbnail
thumbnail
thumbnail
thumbnail
thumbnail

I'm a fan of parallax effects (if done correctly) and you should be too. :)

For a container div , i.e. if you have a scrolling div, we are going to use the useScroll() from framer-motion with a gridRef ref in order to track the scroll.

Code Snippet

With overflowing container

Without overflowing container

Or something more fancy

thumbnail
thumbnail
thumbnail
thumbnail
thumbnail
thumbnail
thumbnail
thumbnail
thumbnail
thumbnail
thumbnail
thumbnail
thumbnail
thumbnail
thumbnail
thumbnail
thumbnail
thumbnail
thumbnail
thumbnail
thumbnail

Code Snippet

Ready to bring your website to life?

Experience the magic of a stunning website designed just for you! Contact us now, and witness the transformation within 24 hours. No more waiting around - we're serious about making your vision a reality. ✨

John Shahawy
Henrik Söderlund
John Ferry
Meru Gokhale
Georg Weingartner
Book a Call