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