Jump to content
Search Community

Project Grid

Conill Blanc test
Moderator Tag

Recommended Posts

Hi,

Sorry to bother im looking to replicate something like the projetcs area of this page (included the filter) - (Can be done with GSAP?)

 

Link: https://marxdesign.co.nz/

 

I was exploring the code but can't figure out how they do the empty space and the different sizes like if it was dinamyc.

Any approach will be helpfull.

 

Thanks in advance for the help.

 

 

 

 

Link to comment
Share on other sites

hey, 

I am not exactly sure what you are actually looking for. But here is what my understanding is. 

 

After looking at the website. They have used CSS Grid to create the layout. Regarding different size of image  they are placing image as contained in the respective container where it will maintain its aspect ratio and render how much ever height it needs. This is one reason you are seeing varying image size. Another reason is  they are spreading image in multiple spans (for eg 2 columns). Regarding the animation (I am assuming you are talking about hover )  it can be done in GSAP. 

 

 

 

  • Like 1
Link to comment
Share on other sites

1 hour ago, Cassie said:

Hey Conill,

What exactly are you looking to replicate, there's a lot going on here.

Just the part with the projects and the filters.  Sorry for the confussion.

 

1 hour ago, Trapti said:

hey, 

I am not exactly sure what you are actually looking for. But here is what my understanding is. 

 

After looking at the website. They have used CSS Grid to create the layout. Regarding different size of image  they are placing image as contained in the respective container where it will maintain its aspect ratio and render how much ever height it needs. This is one reason you are seeing varying image size. Another reason is  they are spreading image in multiple spans (for eg 2 columns). Regarding the animation (I am assuming you are talking about hover )  it can be done in GSAP. 

 

 

 

Something like that  thanks for that visual. but the filter that populates  all in new positions is the thing that i want to see if is possible with GSAP.

 

Tha hover part is not my regarding at this moment.

Link to comment
Share on other sites

Mmm. 

So the 'positioning' in this case, as Trapti said is likely to be CSS grid.

The repopulating would be some sort of JS fetch/sort logic.

The fading animation might be handled with GSAP, but any sort of repopulating/sorting logic would have to be thought through and implemented with JS - there's not really a magic bullet. Maybe masonry would help?

  • Like 2
Link to comment
Share on other sites

19 hours ago, Cassie said:

Mmm. 

So the 'positioning' in this case, as Trapti said is be CSS grid.

The repopulating would be some sort of JS fetch/sort logic.

The fading animation might be handled with GSAP, but any sort of repopulating/sorting logic would have to be thought through and implemented with JS - there's not really a magic bullet. Maybe masonry would help?

Thanks for the answers. I will check that!

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...