Scrollto pluggin - Cancelling the animation if the page is reloaded on a lower scrolling position

[Neomas 0 Likes (Newbie)]

I'm using the ScollTo plugin to hijack the scrolling of the user:

• I've got multiple sections.
• Once the user scrolls a little bit the first scrollTo animation gets triggered and scroll the whole window to the second section.
• Once the user scrolls down more it automatically scrolls down to a third section.

To achieve this I've use this code:

let tlhomescroll = gsap.timeline({
  scrollTrigger: {
      trigger: '.o-herotall__bg',
      start: "top top",
      end: "bottom center",
      autoKill: false,
      markers: true,
      pin: false,
      scrub: false,
      toggleActions: "restart none none none"
  }
});
tlhomescroll
.to(window, {duration: 1.5, ease: "power3.inOut", scrollTo: "#section2"});

using "o-herotall__bg" as a trigger on my 1st section it scrolls to section 2. I then do the same for section 2 to section 3.

 

This all works fine, but the problem is:

 

Once the user scolls down and reloads the page or comes back from another page to this on on a lower scroll position, the scrollTo is triggered and the window scrolls to section 3.

 

How can I prevent the scroll event from triggering when the page isn't loaded at the top?

See the Pen yLaymKq by robin-vanvoorden (@robin-vanvoorden) on CodePen

Edited November 30, 2020 by Neomas
Added codepen link

[ZachSaucier 7,152 Likes (Superhero)]

Hey Neomas and welcome to the GreenSock forums. 

 

It's hard to say without seeing a minimal demo but have you tried limiting the callbacks? Try putting this at the top after you register ScrollTrigger.

ScrollTrigger.config({ limitCallbacks: true });

 

[Neomas 0 Likes (Newbie)]

I'm not sure the codepen makes it very clear, because it returns to the top of the page when refreshing, but hopefully it gives you a beter idea of what's going on.  

How would limiting callbacks work? I've tried implementing 

ScrollTrigger.config({ limitCallbacks: true });

but so far no luck... 

[akapowl 5,225 Likes (Superhero)]

 

Hey @Neomas

 

I just andwered a question in the thread mentioned below on how to possibly prevent the callbacks from firing when clicking a nav-button.

That demo showed the same behaviour you mentioned - the callbacks firing too, when reloading the page in a section further down, so I added a variable there to check wether the page is still 'settingUp' and then only fire the callbacks if that variable is false. That seems to work quite good and could be a possible solution to your issue, too.

 

 

Check that thread here

 

 

 

And here is the demo 

 

See the Pen 76a69a09b2e78cd1995779310b2edd6b by akapowl (@akapowl) on CodePen