Jump to content
Oksana Romaniv

scrollTo plugin and window offset top on animation end

Recommended Posts

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

 

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.