Search the Community
Showing results for tags 'scroll-snap'.
Found 1 result
-
I have a site where the homepage is stacked sections HTML tags. Ideally I wanted each vertical section to vertically snap when a person got close and in most situations, the content fits within the screen. In the sections (rows in graphic) where there are multiple blocks, this is where I need the screen to vertically pin or snap and then it sideway scrolls between each slide (horizontally snapping) and then releases at the end and vertically scrolls to the next section. For the most part, I have it working but the CSS scroll-snap-type: y mandatory; (on html) and scroll-snap-align: start; on each #structure content section is vertically snapping which is great. I have a probably not that great working GSAP sidway scrolling which when it hits the end quickly jumps to the next vertical section before the viewer can look at th content (very sensitive scrolling). The issue is that when scrolling down or up, sometimes the screen literally goes crazy and the page starts jumping all over the place. Seriously bad. As soon as I remove hte CSS scroll-snap elements, it works again but the vertical sections do not snap which I need. I am hoping that I could use GSAP to do the vertical snapping but so far I cannot find a working version were setting vertical snapping between sections and the occasional horizontal scrolling via GSAP Scrolltrigger. I'm also hoping that there is a way where I do not have to set the width of the sideway scroll and it could detect the number or slides x the width and do that dynamically. I have attached a Codepen with as much as I have and I know with probably a few lines or tweaks it will work. Sorry for the verbose description. I'm trying to be informative as possible. Thanks for any insight in advance. It would be soooo good to get this working. Cheers Murray
