GSAP Markers weird behaviour

[KeithMartell]

Hi all! New to TriggerScroll/GSAP here. I'm facing a weird behaviour with the same exact code on codepen vs my local react app.

Basically  what I am trying to achieve is a simple rotation of the image when the parent  div containing the image comes into viewport. To note, the parent div is part of a list of "divs" which is on one big "position: absolute" div which is on top (z-index: 2) of a "base" div (acting like a background). 

I seem to be able to achieve this effect on codepen, but for some reason on my react app, the start and end markers are pushed all the way to the top of the screen. But if I make changes on the file and hot-reload, the marker jumps to the correct position. But if I were to do a refresh on the browser (instead of hot-reloading), the trigger markers load on the top of the div by default.

I've tried both CDN and npm method for installing, I cannot figure out why this is happening  Did I mess up some order of js bundle loading or something like that?

Cheers in advance

See the Pen OJwrdbM by Keith-Eng (@Keith-Eng) on CodePen

[GreenSock]

Welcome to the forums, @KeithMartell.

 

Whenever I hear about something working fine in CodePen but not locally, and it's React, that's an immediate clue that you're probably getting bitten by the React 18 "double-useEffect() invoke" behavior. It's a React thing. And I bet you're not doing proper cleanup to make sure you're not accidentally creating multiple conflicting/duplicate ScrollTriggers/animations. 

 

I'd strongly recommend reading this article:

 

 

gsap.context() is your new best friend in React  It makes cleanup so simple. 

 

useLayoutEffect(() => {
  let ctx = gsap.context(() => {
    // put all your GSAP/ScrollTrigger code inside here!
  });
  
  return () => ctx.revert(); // <-- cleanup!
}, []);

 

If you're still having trouble, just fork this Stackblitz React starter template and try to recreate the problem: 

https://stackblitz.com/edit/react-cxv92j?file=src%2FApp.js

[KeithMartell]

@GreenSock oh wow! thanks for the quick response

I adapted the template and it works now!

Still a little confused as to whats happening and why and why is that the fix, shall go do more reading onto context and uselayouteffect

Appreciate it! My GSAP Hero :)))))))

[GreenSock]

3 minutes ago, KeithMartell said:

Still a little confused as to whats happening and why and why is that the fix

Basically React calls useEffect()/useLayoutEffect() TWICE in strict mode. Super annoying because that ends up creating duplicate (competing) animations/ScrollTriggers. That's why it's so important to do proper cleanup (killing/reverting the old ones before creating new ones). 

 

Glad to hear it's working now for you! Enjoy the tools. 💚

[kanishk soni]

 thank you

[Rodrigo]

Hi @kanishk soni,

 

Unfortunately there is no codepen link in your post and I don't see anything odd in the code you pasted. The only suggestion would be use vh instead of height: 100% and adding a height to the html and body elements.

 

If you keep having issues, remember to include a minimal demo.

Happy Tweening!

[kanishk soni]

13 hours ago, Rodrigo said:

Hi @kanishk soni,

 

Unfortunately there is no codepen link in your post and I don't see anything odd in the code you pasted. The only suggestion would be use vh instead of height: 100% and adding a height to the html and body elements.

 

If you keep having issues, remember to include a minimal demo.

Happy Tweening!

thank you very much