Jump to content

Oksana Romaniv

scrollTo plugin and window offset top on animation end

Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts



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;

      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


Link to comment
Share on other sites

The issue is that you are telling the function to execute immediately when you add the () at the end: 


onComplete: this.onSlideChangeEnd(slideIndex)

But you need to just pass a reference to the function and then pass the parameters separately in an array


onComplete: this.onSlideChangeEnd,
onCompleteParams: [slideIndex]



  • Like 2
  • Thanks 1
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.