Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Oksana Romaniv

GSAP ScrollTo plugin glitch

Recommended Posts

Hello,

 

I have this strange issue with scrollto animation that freezes really bad the first time it's executed, but after that - everything works smoothly. 

 

The native scroll on the body is disabled (with overflow hidden) and on user scroll, I'm triggering the scrollto animation to the next section. The staging page is here: http://your-agency-staging.livewell.in.ua/ (the issue is present when you first load the page and scroll on the home page to next section). After that initial scroll, the next navigation looks much smoother.

 

Anyone can help me to debug this?

 

The class method that triggers the scroll is:

 

goToSlide(slideIndex) {
		//If the slides are not changing and there isn't such a slide
		let $slide = $($(this.slides).get(slideIndex));

		if (!this.isAnimating && $slide.length) {
			//setting animating flag to true
			this.isAnimating = true;

			//Sliding to current slide
			TweenMax.to(window, 1.25, {
				scrollTo: {
					y: $slide.offset().top,
					autoKill: true,
					force3D: true,
				},
				onComplete: this.onSlideChangeEnd,
				onCompleteParams: [slideIndex],
				onCompleteScope: this,
				ease: Power3.easeOut,
			});
		}
	}

 

The scroll callback is throttled with lodash/throttle:

 

  // event listerner for scroll
  const onMouseWheel = this.onMouseWheel.bind(this);
  const onMouseWheelThrottled = throttle(onMouseWheel, 250, {
      leading: true,
  });
  this.onMouseWheelThrottled = onMouseWheelThrottled;
  $(window).on('mousewheel DOMMouseScroll wheel scroll', this.onMouseWheelThrottled);

 

I've tried with/without the force3d, with/without the autokill. Should I maybe use another approach for the "scrolling" between section (translating body element or something like this)?

 

Thanks!

Link to comment
Share on other sites

the only thing I would suggest to troubleshoot would be change the 250 to something really big like 10000 or really small like 10 to see if the throttling is related to the problem

 

 const onMouseWheelThrottled = throttle(onMouseWheel, 250, {
      leading: true,
  });

  • Like 1
Link to comment
Share on other sites

Yeah, it's SUPER difficult to troubleshoot a live site like that with tons of minified JavaScript and various things happening. Profiling showed a massive hit with an anonymous function somewhere, so it's almost surely unrelated to GSAP. I wish I had more to offer, but if you still need some help, please provide a reduced test case with uncompressed code (ideally in a codepen). 

  • Like 1
Link to comment
Share on other sites

Hello everyone and thank you for your replies!

 

@GreenSock, I totally understand that that's impossible to debug it like this! I was just thinking maybe I'm using the wrong logic altogether for the scrollto plugin. Could you please share how can I use the profiling check as you mentioned here:

 

> "Profiling showed a massive hit with an anonymous function somewhere, so it's almost surely unrelated to GSAP"

 

Maybe I can track down this anonymous function in my code :)

 

Thanks!

 

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