Brogrammer

My bad, i forgot to add that. I am now calculating the amount of spacing using the height of the elements, thanks for pointing that out. const panelHeight = panel.offsetHeight; So, i am close to getting the desired behaviour i want (the content section is moving on top the hero ). One more thing, some contents are hidden and not displayed when i scroll. i have 3 sections inside <div className="panel content"></div> but i only get to see one when i scroll. how can i fix this? Thanks

Hello, thanks for the ```useLayoutEffect``` tip which i have added to my code. Unfortunately, it doesn't still help me solve the problem i am facing. Your guidance will be appreciated

Hello great devs, I have been working with gsap for a while but with pure html, css and javascript. As a react dev, i decided it's time to try gsap with react and it has not been easy. I am currently working on a fun project where i need the hero section to stay pinned while other sections scrolls above it. I have tried different technique to achieve this but i am still hitting a dead end. All help will be appreciated as i am curious to know what i am doing wrong!! Thank you all. codesandbox: https://codesandbox.io/s/condescending-driscoll-s78slx?file=/src/App.js

Hello, I started learning Gsap recently and I am stuck with this little SlideUp Panel I'm working on using Gsap scrollTrigger. So i have 3 scroll linked panels that slideup on each other. The 2nd panel (middle one) has a gallery that scrolls horizontally. The issue is, the 3rd panel slides up on the 2nd panel before the gallery on it finish scrolling... I appreciate y'all help in advance, thanks.