ScrollTrigger doesn't fire when page is already scrolled when loaded

[jmsv]

My page has a collapsible nav. The trigger element is absolutely positioned 128px below the top of the screen. When it exits, the nav collapses. This works fine if the page starts at the top, but if the page is already scrolled, the scroll trigger doesn't fire. If I set `scrub: true` it works fine. 

 

What's the best way to handle this use case?

 

Demo Video:

https://share.cleanshot.com/QpmnJfM1

 

Snippets:

  const tweenNavBar = gsap.timeline({
    scrollTrigger: {
      trigger: ".nav-bar_trigger",
      start: "top 128px",
      end: "top top",
      toggleActions: "none play reverse none",

 

[GSAP Helper]

It's pretty tough to troubleshoot without a minimal demo - the issue could be caused by CSS, markup, a third party library, your browser, an external script that's totally unrelated to GSAP, etc. Would you please provide a very simple CodePen or CodeSandbox that demonstrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best (avoid frameworks if possible). See if you can recreate the issue with as few dependancies as possible. If not, incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, then at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen

 

If you're using something like React/Next/Vue/Nuxt or some other framework, you may find StackBlitz easier to use. We have a series of collections with different templates for you to get started on these different frameworks: React/Next/Vue/Nuxt.

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. 

[GreenSock]

This looks odd to me: 

start: "top 128px",
end: "top top",

The means you're setting the end to be BEFORE the start. Logically that doesn't make much sense. I wonder what you were trying to do there. 

 

Also, are you using the latest version of GSAP/ScrollTrigger? 

 

Once we see a minimal demo that clearly shows the issue (like a CodePen), I'm sure we'll be able to offer better advice. 

[jmsv]

This was totally on me, I'm not sure exactly why but wrapping my `gsap` code inside of `webflow.push()` was preventing it from running when the page was already scrolled. Moving it outside of that function did the trick. 

 

window.Webflow = window.Webflow || [];
window.Webflow.push(() => {
  /* gsap, etc — doesn't work */
});

/* works */
gsap.to(...

 

[jmsv]

@GreenSock is there an event that's fired when ScrollTrigger is active when the page is loaded already scrolled? I'm looking to manually control the easing for forward vs. reverse by hooking into onLeave and onEnterBackbut it doesn't seem like either of those fire on initial load.

[GreenSock]

On 4/6/2023 at 2:12 PM, jmsv said:

@GreenSock is there an event that's fired when ScrollTrigger is active when the page is loaded already scrolled? I'm looking to manually control the easing for forward vs. reverse by hooking into onLeave and onEnterBackbut it doesn't seem like either of those fire on initial load.

I read your question a few times and I'm still not quite sure what you mean. Got a minimal demo that clearly shows what you mean? 

 

If you want to prevent a page from scrolling to a recorded position when you initially load it, See https://developer.mozilla.org/en-US/docs/Web/API/History/scrollRestoration

[jmsv]

Sorry I realized this must be an issue in the existing project I picked up rather than in GSAP.

 

I recreated a minimal demo:

See the Pen gOdVzyd by jamesvclements (@jamesvclements) on CodePen

You have to view in "debug mode" for the scroll restoration to work, but "on enter" and "on leave" do fire when the page scrolls to the recorded position on initial load:

 

https://share.cleanshot.com/psjDPLxt

 

Let me know if you have any guesses why these events wouldn't be firing in a different project. I thought the GSAP code was being loaded too late on the page so I bumped it up to the top of the global `</body>` code, but no luck. Might be one of the other external libraries they're loading.

 

[Rodrigo]

Hi,

 

Does the project you're working on has the latest versions of GSAP and ScrollTrigger? Maybe the original code you got handed is using an older version. Are the markers for that and other ScrollTrigger instances correct? I'd try debugging some markers in order to know how that is being executed. Honestly I can't think, at the top of my head, of anything that would cause this. I mean if something is messing with the DOM structure it should cause issues on every calculation ScrollTrigger is making. If GSAP and ScrollTrigger were loaded and executed way after the DOM is created and rendered, as far as I know the callbacks should still get called.

 

Sorry I can't be of more assistance.

Happy Tweening!