Jump to content
GreenSock

Shawn Williams

How can I pause a ScrollTrigger until the user is ready to scroll

Recommended Posts

I'm loving scrollTrigger, but I'm running into an issue with my implementation.  I have multiple scroll triggers but cannot figure out how to keep the page from automatically scrolling to a scrollTrigger before the first scrollTrigger runs.  In my example I need the first scrollTrigger to  scrollTo and stop at the "catchy tagline" div while keeping the div below halfway in the viewport.  The problem is the below div has a scroll trigger with a scroll to implementation I pulled from the forums that is either making the page scroll directly to it, or once the first scrollTrigger is complete, immediately it starts the next ScrollTrigger.  I've tried the idea here but can't get it to work in my dev environment,

Please help!

See the Pen MWVpxzr by ninobrownh20 (@ninobrownh20) on CodePen

Link to comment
Share on other sites

Howdy, @Shawn Williams

 

I'm having a tough time understanding all that you're trying to do there. You've got over 100 lines of JS and it seems like you're trying to force the scroll to sort of snap to certain spots...but maybe you don't have a grasp on where or how? Like...it's snapping where you don't want? 

 

I have a feeling that you're throwing some chunks of JS you've found in various other pens in here without really understanding what's happening or how to structure it - would that be a fair assessment? In that case, it's probably not good for us to try troubleshooting something with a bunch of faulty plumbing that's patched together, but instead try to understand your ultimate goal because it may be wise to completely throw everything away that you've got in there now and take a totally different approach. 

 

With ScrollTrigger projects, I just see a lot of people overcomplicate things or structure their HTML/CSS in ways that make it very clumsy, so I don't want to slap a band-aid on a shaky foundation. 

 

The way you were describing things was tough for me to follow too, like you said things like "...automatically scrolling to a ScrollTrigger before the first ScrollTrigger runs..." and "...I need the first scrollTrigger to  scrollTo and stop at..." which sounded very strange to me. ScrollTriggers are just triggers - they don't force things to scroll anywhere (well, you can apply snapping, of course, but you don't have any of that). 

 

So maybe try to break this down into the simplest possible part first, and build up from there. For example, if you want to have certain spots on your page that things snap to, only try to get that working FIRST. Then tackle the next requirement once that's done. 

Link to comment
Share on other sites

Hi,

I apologize, I realized the pen had a lot of issues I didn't notice when I copied from my dev area.  I have fixed those and it should now be clearer what the issue I'm having is.  As you can now see there is a scrollTrigger on my top banner that should scrollTo the div below it using the ScrollTo plugin.  This is not happening, but you can see that my other scrollTrigger does work correctly and because of where the scroller start is located it begins the animation and completely scrolls past the second div on my page.  I've tried different methods to get the scrollTrigger working on the top banner but I just can't seem to get it working correctly, but I'm sure there's a fairly simple reason.

Link to comment
Share on other sites

Hi,

I see the change you made but ScrollTrigger is still not scrolling to the div with id #smooth-wrapper in your pen.

Link to comment
Share on other sites

Yes, that's because you've set it up so that when that first section enters the viewport even a little bit, it calls the goToSection() on it. So it's working exactly the way you've asked it to. When you scroll to #smooth-wrapper, partway into that animation it'll trigger the goToSection() and force the scroll position to that spot. 

Link to comment
Share on other sites

Hi,

Yes I understand that's what's happening, how can I remedy this?  I've tried changing the start position for the goToSection but then the scroll does not function properly.  Can I pause that goToSection() until a mouse event occurs or move the scroller start so it does not trigger at the bottom of the viewport but slightly below?

Link to comment
Share on other sites

Sorry, I just don't have time to dig into all the custom logic you're trying to apply and solve it all for you. It looks like you've got snapping applied as well and I'm not sure why. 

 

You could skip the ScrollTrigger on the first section if that's the behavior you want. You can disable/enable scrolling after the initial one is animated to, but then as soon as it's done it's gonna animate to the section that triggers it, so I don't think that's what you want. It boils down to logic problems in your code and the way you're setting things up. You tell ScrollTrigger to jump to a section whenever the scroll position is between two values...but you also want it to NOT do that sometimes. You'll have to figure out which conditions you want and code it accordingly. There's already code in place that'll make it easy for you to scrolling.disable()/enable(). 

 

Maybe this will serve as a jumping off point: 

See the Pen jOzwGRo by GreenSock (@GreenSock) on CodePen

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.
×