Jump to content
Search Community

Issue with GSAP and CSS scroll-snap-align

muzkore test
Moderator Tag

Recommended Posts

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

 

 

site layout.png

See the Pen qBRGbRy by muzKore (@muzKore) on CodePen

Link to comment
Share on other sites

Hm, it doesn't look like your CodePen has things set up  at all like what the image shows. Have you tried that yet? Just ignore all the scroll-driven needs and see if you can get the layout right first. 

 

Your description reminded me of this smooth-scrollbar demo, but your should be much easier because you're not using a smooth scrolling library but at least the concept may be similar: 

See the Pen 1e42c7a73bfa409d2cf1e184e7a4248d by GreenSock (@GreenSock) on CodePen

Link to comment
Share on other sites

 

Oh boy, I remember that demo - that was actually the first time .scrollerProxy was in play.

 

That demo actually still has some now obsolete code from my attempts to hook up ScrollTrigger with smooth-scrollbar before .scrollerProxy 

 

...and it has jQuery.

 

So for anyone interested, I went ahead and cleaned it up a bit - including the removal of jQuery, because why not.

 

 

 

Here it is without smooth-scrollbar

 

See the Pen dyvygmj by akapowl (@akapowl) on CodePen

 

 

 

Here it is with smooth-scrollbar on the body

 

See the Pen poeoONq by akapowl (@akapowl) on CodePen

 

 

 

And here it is with smooth-scrollbar in a dedicated scroller container

 

See the Pen xxqxaQE by akapowl (@akapowl) on CodePen

 

 

 

Hope I didn't miss something there.

 

  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...