muzkore

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

Hey Jack. Call it the n00b in me but I found what the issue was and thought to post it if it in turn could help someone else. I managed to get the CSS scroll snapping working. The reason why it did not work was that I had body { overflow-x: hidden; } in my stylesheet. I had it in a reset.scss file and as soon as I disabled that, the snapping worked. I almost exploded from joy!!. The great thing is that it is working with my GSAP code... so BRILLIANT!!! Based on this found discovery and head slap oversight, I am thinking (and hoping) that I can combine the GSAP ScrollTrigger with CSS scroll-snap to do the sidway snapping in my original image above. If I get it to slide across 3 or more full width/width slides, set the ease to none and combine with CSS scroll-snap by having scroll-snap-type: x mandatory on the section and scroll-snap-align: start on the slides, I should get the desired result. So many possibilities. Thanks again. Code is art. Cheers Murray

mind blown..... wow. I'm glad I was not holding my coffee when I saw this. I know it is so simple to some but that just blew my mind. So straight forward. The power here is almost giving me a headache. Thanks again. Wow.

Hi akapowl Thanks for the insight. I had looked at the ScrollTrigger plugin as it was actually what brought me into wanting to learn GSAP. What you suggested actually did exactly what I was asking for and I learned a few new things about GSAP which I really appreciated. My question was actually about how to add something into the call like you did with toggleClass that actually would call a function which could say do a few things instead of just toggling a class. Maybe this is not a good way to do it but I guess I wanted to hear from someone in the know such as yourself as to the approach. Thanks again for your time and insight. This community is amazing. Cheers Murray

Hey Jack. I tried the sideway but it went weird in my project so I think I may have to opt for a slider such as Slick Slider as I am being asked to make it so that the user can scroll past the sideway scrolling section (section two) and avoid the side scroll by scrolling faster than normal (##??##!!). That just sounds like bad UX and non intuitive to me so I am going to put my foot down about it. As for the vertical, I also tried the CSS snap but it did not work. Saying all of that, it is in a WordPress site so there may be other issues at play. Hopefully this will be my last question so I can let you get back to millions of other questions. Scenario: I have a div with the ID of structure-content. In that div are section tags with each page section within. What I am wanting to know is how easy is it to have it so that when people scroll down the page, it snaps the section to the top of the page. Ideally, if it could be flexible to allow for more or less sections and I don't know if it is possible to allow the sections to different height although most are screen height. The CSS option looked like an awesome way to do it does not appear to be behaving (GRRR). Even just a link to something that you believe will work or points to a solution would be fantastic and really appreciated. Learning one step at a time.

Hey Jack Thanks for the link. I had looked at the previously however I did pick up on a few new things that I did not see before which wa really useful. This is good for doing the horizontal scroll and I like how it will even auto detect the number of side scrolls so to automatically generate the length. I guess what I am going to try and do is see if there is a way to flip the coordinates to see if I can use this to scroll and snap on Vertical sections. The only issue is that there will be ones of various heights so it will make for an interesting challenge. Will report back anything that I find but if anyone has any ideas, I would be grateful. Cheers ?

Hi all. I have a situation I am trying to understand hoping to shine some light on calling functions from within Greensock. I have a page that has a fixed page header nav bar (#structure-header). The page has three (at the moment) vertical sections (in #structure-content) and as I vertically scroll through them, I would like to ideally have it trigger a check on when each section gets to the top of the page and check if there is an attribute called 'data-header-nav' on that section tag. If it has it, add the value of that attribute as a class to the structure-header div. I was also thinking, if a person scrolled back up to the previous section, would it remove the class and revert to the previous one? Any help would be greatly appreciated and would help me understand how to call function code from within GSAP (if that is the best way to do it ofcourse). Cheers Murray

Hey all. I'm trying to learn GSAP and am blown away (and a bit overwhelmed) by the immense amount of options. What I am trying to achieve is having a page that has full width sections that are stacked on top of eachother. When the user scrolls, it will scrub but will snap to the next vertical section which ideally would be variable height. On a specific section(s), I would like to be able to add the ability to pin and slide sideways with scrub and snap as well. It would be great if it enabled 'end' where it would unpin to be dynamic such as detecting the offsetwidth of the section. I am 'guessing' that it could be done using gsap.utils.toArray for both the sections and sidescroll slides/subsections and I have tried to get it as far as I could but I know to the right person, it's probably pretty straight forward. Any assistance or insight would be great. I'm excited by what I can see GSAP can do and hope to do a lot more so I can in turn help the community as well. Thanks in advance. Cheers Murray