Jump to content
Search Community

Menu navigation

lauren_d test
Moderator Tag

Recommended Posts

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!

 

 
Link to comment
Share on other sites

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.

  • Like 3
  • Thanks 1
Link to comment
Share on other sites

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 !

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...