ScrollTrigger overflow and cross-browser issues

[Maxifthen]

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.

 

See the Pen ZELQqeJ by GreenSock (@GreenSock) on CodePen

 

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
 

See the Pen WNjMoMy by maxifthen (@maxifthen) on CodePen

[GreenSock]

Hey Max. I glanced at this in Safari and Chrome and didn't notice a difference. I read your description a few times as well and I'm kinda lost.

 

Would you please create a minimal demo (for example, don't involve Draggable unless that's absolutely imperative to show the issue) and focus on just one question at a time as succinctly as possible? That'll significantly increase your chances of getting a solid answer.

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



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

[GreenSock]

6 hours ago, Maxifthen said:

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.

That's a CSS/layout issue that's unrelated to GSAP. We really try to keep these forums focused on GSAP-specific questions.

 

You've got your .scrollContainer set to width: 400% and position: fixed which busts it out of its containing <div> which is why the overflow isn't getting hidden. Kinda counter-intuitive, I know. And its container .scroll-wrapper has a width of 100% and margins of 10vw so I think you meant to have that width 80vw so it doesn't spill outside the viewport. 

 

Good luck!