Hi! Trying to recreate something like the included codepen, but without manually setting the width of the container. I am planning on using a CMS so want it to automatically be able to adjust based on how many elements there are in the container.
Am using nextJS & styled components so not totally sure how to get a codepen up and running but here's what my code looks like
The CSS
const ExperimentContainer = styled.section`
height: 100vh;
width: 100vw;
`
const BoxWrapper = styled.div`
//this is the bit I don't want to have to specify as it will vary depending on how many boxes are within the wrapper
width: 480%;
//
height: 100%;
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
&::-webkit-scrollbar {
display: none;
}
`
const Boxes = styled.div`
flex: 0 0 auto;
width: 80vw;
background-color:rgba(201,125,212);
box-sizing: border-box;
&:nth-child(odd) {
background-color:rgba(125,125,212);
}
`
Greensock
const experimentContainerRef = useRef()
const boxWrapper = useRef()
useEffect(() => {
gsap.to(boxWrapper.current, {
xPercent: -100,
//if I don't specify the width of the BoxWrapper this doesn't work anymore
x: innerWidth,
scrollTrigger: {
trigger: experimentContainerRef.current,
start: "top top",
end: () => innerWidth * 3,
pin: true,
scrub: true,
},
})
}, [])
Codepen from GSAP docs