xnslx Posted June 25 Share Posted June 25 Hello community, I am hoping to do some Zara-style website(https://www.zara.com/us/), as you can see, it is a parent horizontal carousel that each of the containers can also be swiped vertically. Here is my codepen, right now it is a little bit problematic. I hope to do exactly the same thing, when you vertically swipe the carousel, each of the following slides can be stacked on top of the previous one. Thank you in advance! See the Pen OJYQKbE by xnslx (@xnslx) on CodePen Link to comment Share on other sites More sharing options...
Hideakimaru Posted June 25 Share Posted June 25 Hi @xnslx, So actually idk which real implementation they have... I think this should be something with this approach: See the Pen VwOdXJZ by xhideakix (@xhideakix) on CodePen If you scroll a long time to their footer you will see that they have different footers with the same information I guess. And maybe should be something like that: See the Pen MWdXGLR by xhideakix (@xhideakix) on CodePen Also, this is so close to the approach with Observer which looks more like what you want. Hope this will help you to find the best solution.💚 Thanks! Hideakimaru 1 Link to comment Share on other sites More sharing options...
Cassie Posted June 25 Share Posted June 25 Yep! That looks like Observer is the right tool, This demo may be helpful for you See the Pen oNdNLxL by GreenSock (@GreenSock) on CodePen Link to comment Share on other sites More sharing options...
xnslx Posted June 27 Author Share Posted June 27 @Cassie Hello there, actually I am using this See the Pen JjqLjvP?editors=1010 by SahilAFX (@SahilAFX) on CodePen , as a reference. Not sure if it is doable or not. Link to comment Share on other sites More sharing options...
Cassie Posted June 27 Share Posted June 27 Hey, Ah ok I missed the horizontal/dragging part. That will definitely make it a little trickier, but the codepen you referenced won't be the way to get there. The Zara site you linked to is using events rather than scroll (which is a good use case for Observer) Why don't you start by getting to grips with Observer using the demo above and taking a look at the docs. You'll need to start again though I'm afraid, your original demo isn't the right approach. This isn't the right fit for a Scrolling/ScrollTrigger solution. https://gsap.com/docs/v3/Plugins/Observer/ 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