Hello, new member here. Been using your library for a long time =) First time trying out a horizontal site, finally got a request to do one. So using ScrollTrigger for this functionality. Basically trying to replicate the examples in this post.
However, its not quite working right. I have 4 divs inside the container. These divs are set to 100% width ( may need to use pixels, let me know )
When I run, it works... I see the first "section" div, it scrolls but the other divs are hidden. When I inspect, the container has overflow set to hidden, which explains why the rest of the divs are not visible. When I disable overflow, all the sections show up and works fine.
I curious on what I'm doing wrong here, when I inspect the code in this post, the container does not have overflow set at all, but on mine it does.
Below is a condensed version on my end, the parent-container div is just the outer element. I added it so its close to how I have it setup.
<style>
.parent-container {
width: 100%;
}
.container {
display:flex;
flex-wrap:wrap;
flex-direction:column;
height:100vh;
}
.section {
position: relative;
display: flex;
width: 100%; // Use Pixels instead?
height: 100%;
padding: 0 40px 0 80px;
margin: 40px 0;
}
</style>
<div class="parent-container">
<div class="container">
<div class="section"></div>
<div class="section"></div>
<div class="section"></div>
<div class="section"></div>
</div>
</div>
this.scrollContent = document.getElementsByClassName("container")[0];
this.gsap.to(this.scrollContent, {
x: () => -(this.scrollContent.scrollWidth - document.documentElement.clientWidth) + "px",
ease: "none",
scrollTrigger: {
trigger: this.scrollContent,
invalidateOnRefresh: true,
pin: true,
scrub: 1,
end: () => "+=" + this.scrollContent.offsetWidth
}
})
Any help would be appreciated.
Looked at the line where it actually sets overflow: hidden ---
ScrollTrigger.js Line 896
pin.firstChild && !_maxScroll(pin, direction) && (pin.style.overflow = "hidden"); // protects from collapsing margins!
Thanks you!
