Jump to content
Search Community

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

Neomas test
Moderator Tag

Recommended Posts

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 by Neomas
Added codepen link
Link to comment
Share on other sites

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

Link to comment
Share on other sites

 

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

 

  • Like 2
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.
×
×
  • Create New...