CreateSean

I've got horizontal scrolling working with snap. However some of my sections have a modal and a div within that modal will need to scroll vertically. However This is not working. I looked at the demos and couldn't find anything related to this. Also searched the forums All help greatly appreciated.

@OSUblake That's brilliant, thank you.

@OSUblake thank you for that. I've used that but am still not getting draggable working. Here's what I've got so far. Any further advice or pointers greatly appreciated Sean https://codepen.io/createsean/pen/KKXGjOo

I've got a site I'm building where the entire page is horizontal scrolling and that is working correctly. However my client has asked that it be possible to click/drag to left/right and that keyboard navigation use the left/right arrow keys and not the up/down as it does now. Is this possible?

@cassie Thank you so much. Hope you have a super year in 2022 - Happy New Year.

@Cassie That makes sense - but I'm not sure how to insert the 0 and 1 into the array. I tried this let snapValues = [0,1]; but that didn't do anything. I figure that's cause snapValues is being set further down, but I looked at that and don't know what to modify in order to add the 0 and 1. Really appreciate all your help. Javascript is really my weakest skill and I'm lost here. edit experimented some more and setting let widths = [0, 1] seems to work

@Cassie That's very helpful thank you. noticed that scrolling backwards you can't stay on the first section it auto scrolls to the 2nd one.

I didn't understand that. Removed the snap line from my timeline and tried using CSS snap but that's also not working. Hmmm https://codepen.io/createsean/pen/MWEQPzM?editors=1000

Okay - so what do I do if I don't know how many sections there will be? I set this up as an example, but client will be using a CMS where they can add as many sections as they want to the page.

I'm a newbie to gsap - also rather weak at javascript. I'm working on a new site with a section that horizontal scrolls - that is working however scroll snap does not align sections with the edge of the viewport as expected. In the above codepen - I've also got a modal (powered by AlpineJs) that slides in from the left, but because the scroll snap isn't aligning with the edge of the browser it looks wrong. is it possible to have this align to the left edge of the browser if scroll snap doesn't work? Not sure why the embedded codepen is not horizontal scrolling, but if you go to the codepen site it does horizontal scroll.

@akapowl , Thank you. that helped a lot.

This is my first project using greensock and my javascript skills are rather weak. I've implemented horizontal scroll found here and this is working great. However I dont' want horizontal scroll below 1100 pixels. What is the best way to do that? current code: gsap.registerPlugin(ScrollTrigger) let container = document.getElementById("chapter-wrapper"); gsap.to(container, { x: () => -(container.scrollWidth - document.documentElement.clientWidth) + "px", ease: "none", scrollTrigger: { trigger: container, invalidateOnRefresh: true, pin: true, scrub: 1, end: () => "+=" + container.offsetWidth } })