Create Smooth Scroll and Draggable Gallery Infinite XY-Axis

[Jack Bug]

Hi Team,

Currently I'm figuring out GSAP features in React and curious how to make a gallery page that can do like this image (attached):
- XY Axis scroll and draggable
- Infinite content
- Smooth (Inertia??)

When I try to make it with my own, it's not really infinite content and lagging, then the XY Axis not flexible to scroll and draggable (I haven't figure it out until the smooth one). Does anyone can help me to make this kind as an example?

Reference:
https://truekindskincare.com/gallery

[mvaneijgen]

Hi @Jack Bug welcome to the forum!

 

The search term you're looking for is called something like "infinite canvas" and there are already some topics on the forum on it,  see https://gsap.com/community/search/?&q=infinite canvas&type=forums_topic&quick=1&search_and_or=and&sortby=relevancy

 

This topic seems promising, it uses draggable, but maybe it could be a good jumping off point.

 

By no means a simple effect and most of the heavy lifting will be some custom Javascript logic to make everything work and GSAP will probably just be a small percentage of the code base. 

 

Hope it helps and happy tweening! 

[Jack Bug]

Thank you for the response @mvaneijgen.

However, if you see the web, the behavior seems different with the reference you gave. But no problem, I'll continue figuring out.

Thank you

[mvaneijgen]

Yes of course. I've linked just one example, but there are several post on this topic with all kinds of different requirements and options (see the linked search query) , it is up to you to pick the one that best suits your use case. 

 

That is also the beauty of GSAP, you can build what ever you like, so when you have something basic working you can modify it to do exactly what you want. 

 

Hope it helps and happy tweening!