Scrolltrigger Pin Making The Element Disappear

[Samalander]

Hey -

My element is getting deleted/moved too far down when I want it to pin. 

https://i.imgur.com/s2x2g3I.mp4 (File too big to directly upload)

 

DEMO | CODE

 

Thanks

 

 

[GreenSock]

It's difficult for us to work with Replit, but here's a CodeSandbox that shows it working: 

https://codesandbox.io/s/exciting-wing-cxeglt?file=/src/App.js

 

I noticed: 

• You used useEffect() instead of useLayoutEffect() which is probably not a big deal. We just recommend useLayoutEffect() to avoid certain edge cases where React renders things prematurely leading to a flash of unstyled content. 
• You didn't pass an empty dependency Array to the useEffect(), so it'd get called on EVERY render.
• You didn't use gsap.context() which is super handy in React environments. Please read this article:

You don't need to use a bunch of refs, by the way. That's another benefit of gsap.context(). You can use selector text because of scoping. 

 

Does that help?