Maxifthen

Hi Jack, thanks for getting back to me and sorry for the confusion. I was trying to give all the information in case it was useful but looks like I put in too much detail! Typically I just looked on my macbook and it's working fine in Safari whereas on my imac the issue was there yesterday, then checked the imac again and it's working! No idea what was happening but it seems to be a glitch rather than an a real issue. I've updated the pen and stripped out everything I can to show the remaining issue. https://codepen.io/maxifthen/pen/WNjMoMy I have 2 horizontal scrolling sliders positioned one on top of the other (with z-index) and I want to keep them independent (not wrapped together in a container). I'm trying to inset both of them from the edges of the viewport by the same amount and hide the overflow on both sides. I can't get the overflow on the right margin to hide but the left side is working as intended. Hopefully that clears things up enough. Max

Hi all, I was wondering if anyone could give me some guidance with something I'm trying to achieve. I've been working on this demo and I've made progress but there are a couple of issues I haven't been able to solve. I'm pretty new to JS and teaching myself to code so any help would be much appreciated. The setup is 2 horizontal scrolling sections adapted from this codepen layered on top of each other in the z-index. https://codepen.io/GreenSock/pen/ZELQqeJ The 2 'layers' are separated with some text and the goal is to get the top layer's slide opacity to fade in as each one reaches the middle of the viewport, to become 'active' and visually move forward in the z-index 'through' the text. In Chrome the basic setup works ok but in Safari the bottom layer isn't visible unless I add a height to the scroll-wrapper. If I do add a fixed height it becomes visible but the scroll locks. I think this is to do with the bottom layer not having the pin-spacer that gets added to the top layer so the scroll-wrapper has no height. Is there any way to add the pin-spacer to the bottom layer as well so it has a height controlled in the same way as the top layer? The other issue I have is that I want to make both the top and bottom layers 80vw and centred with the overflow hidden. To achieve this I've been trying to get 10vw left and right margins but only the left seems to hide the overflow. I've tried everything I can think of with the position settings of different elements but nothing has been successful. I want the text 'layer' to overflow too but at 100vw, at the edge of the viewport, rather than inset at 80vw so that's why I'm trying to apply the overflows to the layers individually. Can anyone think of how to overcome this? Thanks in advance Max

@akapowl thanks for the tips. I will make a codepen as soon as I can and start a new thread

Hey @akapowl I've been making some progress but stumbled onto some inconsistency between browsers that I can't seem to overcome. Would you take another look at my project please? I'm trying to wrap my horizontal scrolling section in a 80% width div with the overflow hidden to create a smooth scrolling carousel-type section fixed in the middle of the page. I found that by overriding the z-index to 0 and overflow to hidden on the pin-spacer I can get what I want in Safari but the overflow remains visible in Chrome. If I change the position of the scrollContainer from fixed to relative or absolute the overflow works in Chrome but obviously this causes the section to scroll down with the page. I'm looking for a solution that works across browsers so could you suggest any possible methods for this? https://horizontal-scroll-test-e8d1e2.webflow.io/ Thanks Max

@akapowl Aha! That was it! Thanks so much for the quick response (and the correct answer!) Not sure how long it would have taken me to realise it wasn't GSAP Draggable. I must have searched for 'draggable' rather than searching GSAP and adding all the bits I needed. Max

@akapowl Hi there, I'm trying to rebuild this codepen from further up this thread https://codepen.io/GreenSock/pen/ZELQqeJ in Webflow and I'm getting some errors in the console. I wondered if you might be able to help me track down the issue? The horizontal scroll seems to be working fine but I'm getting this error in the Draggable code - Uncaught TypeError: Draggable.create is not a function at (index):59 This is the link to the demo site - https://horizontal-scroll-test-e8d1e2.webflow.io/ I'm using the exact JS from the codepen so I just can't figure out why it's not happy. I've been trying everything I can think of but I'm pretty new to JS so any help you could give me would be much appreciated. Thanks Max