gsap Menu navigation

[lauren_d]

Hi,

 

I've been trying to make a gallery navigation like this: https://www.powerhouse-company.com where the menu is a gallery of images and moves when you drag the canvas and then you have the select to sort the diverse articles, the animation is beautiful. I'm guessing I have to use a plugin to do the sorting like they use (flickity), but I'm kind of lost on how to make the canvas. I just want to be able to drag my canvas in fullview and integrate it with images which would be Links. 

 

I'm not expecting any of you to tell me the answer. I'd be more than happy if you just simply point me in the right direction.

And sorry if my english is not good, it's not my first language.

 

Thank you all for your time!

 

 

[ZachSaucier]

Hey Lauren and welcome to the GreenSock forums.

 

Like anything, you need to break this effect down into pieces and then build out each piece. In this case I'd use GSAP's Draggable with IntertiaPlugin to do the dragging. It'd probably be best to use a proxy element that is fixed in place and covering the whole screen. 

 

I did something similar in this infinite image gallery viewer but it could be simplified a good bit to create the effect that you link to:

See the Pen PoqxzMV by ZachSaucier (@ZachSaucier) on CodePen

 

If you have specific questions feel free to ask.

[lauren_d]

Thank you for your welcoming and for your help.

I will start with what you told me and build what I want from there. I will update and post with my pen. I will surely have more questions haha. Especially with the sorting but I will work on it !

Thank you !