Hi,
I need some help with horizontal scrolling.
I can't provide you with a CodePen example.
My env.:
Next.js
GSAP (newest version at the moment)
My <body> element contains a <Layout> element which is set like this:
.layout {
display: flex;
flex-direction: row;
width: 100vw;
height: 100vh;
overflow-y: auto;
main {
display: flex;
flex-direction: column;
flex-grow: 1;
overflow-y: auto;
overflow-x: hidden;
}
}
Inside <main> I'm trying to implement something simmilar to the codepen https://codepen.io/GreenSock/pen/eYpOZvX
My version looks like this:
export const HorizontalScrollTiles: React.FC = () => {
useEffect(() => {
const container = document.querySelector('.abc');
const scroller = document.getElementById('main');
gsap.to(container, {
x: () =>
`${-(container.scrollWidth - document.documentElement.clientWidth)}px`,
ease: 'none',
scrollTrigger: {
scroller,
trigger: container,
invalidateOnRefresh: true,
pin: true,
scrub: 1,
end: () => `+=${container.offsetWidth}`,
},
});
}, []);
return (
<div
className="abc"
style={{
minHeight: '100vh',
display: 'flex',
flexWrap: 'nowrap',
width: '600%',
}}>
<Tile
className="horizontal-scroll-tile"
style={{ width: '100%', backgroundColor: '#ff22ff' }}
/>
<Tile
className="horizontal-scroll-tile"
style={{ width: '100%', backgroundColor: '#ffff2f' }}
/>
<Tile
className="horizontal-scroll-tile"
style={{ width: '100%', backgroundColor: '#f29fff' }}
/>
<Tile
className="horizontal-scroll-tile"
style={{ width: '100%', backgroundColor: '#ff8029' }}
/>
<Tile
className="horizontal-scroll-tile"
style={{ width: '100%', backgroundColor: '#ffff99' }}
/>
<Tile
className="horizontal-scroll-tile"
style={{ width: '100%', backgroundColor: '#11ffff' }}
/>
</div>
);
};
Tile Element is just a <div> containing another <div> with a <h2>
I'm going to explain the problem now:
First of all, the code does something only if I set markers: true it's not perfect, but at least I can scroll almost to the end of the last <Tile>
Without markers set to true, I can't scroll at all.
Do you have any ideas/suggestions how to implement this functionality?
It's really important.
With markers set to true:
and without: