[GSAP ScrollTo plugin glitch]

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!

 

[GSAP ScrollTo plugin glitch]

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!

[scrollTo plugin and window offset top on animation end]

Thank you @Carl ! You're right! This solves my problem.

[scrollTo plugin and window offset top on animation end]

Hello,

 

I'm using ScrollToPlugin to animate window position between sections.

 

The issue is the following. I'm trying to check the window offset at the end of the animation (window scrolled to correct position), but I actually get the $(window).scrollTop() BEFORE the animation in the onComplete callback. The example code:

 

   // Go To Slide functionality
    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, 0.5, {
          scrollTo: {
            y: $slide.offset().top,
            autoKill: false,
          },
          onComplete: this.onSlideChangeEnd(slideIndex),
          onCompleteScope: this,
          ease: Sine.easeInOut,
        });
      }
    }

 

The onComplete callback

 

    // Change animation status
    onSlideChangeEnd(slideIndex) {
      this.currentIndex = slideIndex;
      this.isAnimating = false;
      this.nextSliderIndex = undefined;

      this.updateCurrentOffset();
      console.log('this.offsets :', this.offsets);
      console.log('this on end :', this.currentTop);
      console.log('this on end :', $(window).scrollTop);
      console.log('vanilla :', document.documentElement.scrollTop || document.body.scrollTop);
    }

 

The logged window.scrollTop are the actual values when animation starts (previous section coordinates). When you scroll again - the value becomes accurate for the previous callback.

 

How can I get the window offset value after it was animated to a position via scrollTo plugin?

 

Thank you

 

[Fullscreen slides with TweenLite, CSSPlugin and ScrollToPlugin]

This solution has a bug: when you scroll page by dragging the scrollbar and then scroll to using a wheel, the window will scroll to the next/prev section "in cache", not to the next/previous section based on the window scroll position.

[Delay when using Tweenlite.to?]

Had the same weird behavior when animating scrollTo property. The duration param looked like the delay before scrolling to the correct section. If anyone stumbles upon this thread looking to resolve similar behavior with ScrollTo plugin, check your CSS for "scroll-behaviour" property. In my case I had "scroll-behaviour:smooth;" that ruined my tween animations.