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

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?

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

Hi,

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

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

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.

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

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

[Smooth Scroller error in Wordpress install]

Awesome, that did it, thanks for making quick work of my issue.

[Smooth Scroller error in Wordpress install]

Hi, I have added SmoothScroller to my wp installation and I can see that the files are loaded, however I'm getting the below error.

 

Uncaught SyntaxError: Unexpected token 'export' (at ScrollSmoother.js?ver=6.0.1:85:1)

 

When looking at the smoothscroller.js file, if I comment out the /*#__PURE__*/  in the line where the error is being generated the error goes away but SmoothScroller still will not load when checking with window.SmoothScroller in the console.  Is this comment the issue or am I missing something in the installation?

export var ScrollSmoother = /*#__PURE__*/function () {

This is my current set up from what I found in the forums, any help is greatly appreciated.

 

// The proper way to enqueue GSAP script
// wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer );
	function theme_gsap_script() {
		wp_enqueue_script( 'gsap-js2', 'https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/gsap.min.js', array('wp-mediaelement'), false, true );
		wp_enqueue_script( 'gsap-st', 'https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/ScrollTrigger.min.js', array(), false, true );
		wp_enqueue_script( 'gsap-smoother', get_stylesheet_directory_uri() . '/node_modules/gsap/ScrollSmoother.js', array(), false, true );
	}
	add_action( 'wp_enqueue_scripts', 'theme_gsap_script' );