ScrollTrigger Weirdness - Gatsby.Js

[Steve Giorgi]

Firstly, I'm trying to create demos for anything I post -- I know that's key to giving you guys something to go on.  Would it work to create a demo in Codeasndbox in this case?   I was kindly asked to avoid it but I'm not sure I can replicate this behavior on Codepen.  If so, I'll attempt to replicate there.

 

This occurs on screen resize and hot refresh in Gatsby.js:

 

  

The ScrollTrigger (is this simply a result of invalidateRefresh?)  This is wrapped in a useEffect with an empty dependency:

 

tlEnergyTransition1.current = gsap

      .timeline({

        paused: true,

        scrollTrigger: {

          trigger: scrollContainer2Ref.current,

          start: 'center center',

          toggleActions: 'play none none reverse',

          invalidateOnRefresh: true,

        },

      })

[GreenSock]

That certainly sounds like an issue with your hot-reloading. I'd suggest disabling that. And yes, very difficult to troubleshoot without a minimal demo. CodePen is best, but CodeSandbox is better than nothing  

[OSUblake]

On 8/6/2021 at 9:38 PM, Steve Giorgi said:

The ScrollTrigger (is this simply a result of invalidateRefresh?)  This is wrapped in a useEffect with an empty dependency:

 

What's the reason for using an empty dependency? At the very least, you should at least return a cleanup function. 

return () => {
  tlEnergyTransition1.current.scrollTrigger.kill();
  tlEnergyTransition1.current.kill();
}