Conill Blanc Posted June 30, 2021 Share Posted June 30, 2021 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 More sharing options...
Cassie Posted June 30, 2021 Share Posted June 30, 2021 Hey Conill, What exactly are you looking to replicate, there's a lot going on here. Link to comment Share on other sites More sharing options...
Trapti Posted June 30, 2021 Share Posted June 30, 2021 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. 1 Link to comment Share on other sites More sharing options...
Conill Blanc Posted June 30, 2021 Author Share Posted June 30, 2021 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 More sharing options...
Cassie Posted June 30, 2021 Share Posted June 30, 2021 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? 2 Link to comment Share on other sites More sharing options...
Conill Blanc Posted July 1, 2021 Author Share Posted July 1, 2021 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 More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now