MohitR

Sorry, I didn't get it as I am completely new to this GSAP and I am not able to visualise the structure/approach you are sharing. It would be better If you can provide a quick demo for the same. And one more thing, If I pinned the element, then the previous element will not have that scroll effect,I want that also be scrollable like below but with the various content. And that content should be accessible first before scrolling the next section. https://codepen.io/GreenSock/pen/QWjjYEw

I have tried and facing issues in it, I have already shared the problem here

I'm new to GSAP and I'm attempting to create an animation in which I have multiple relative sections with variable height and an absolute position element within each section. I want to scroll the entire inner section by setting the property top to negative, but before I get there, the next element appears. What I want is, when the element's complete top value (negative) is set, only then the next element should appear.

Yes, I want to achieve the second option however, There is variable height of component as here https://codepen.io/mohitrj49/pen/YzjeNPy. And in place of background, there is content in the sections

I am creating a overlap effect, where each section is stacked and As the user scrolls down the page, the next section will appear over the previous element. The previous element should still be in scroll mode (little slower than the next) and not pinned.

How can we implement the scroll snap in a section with varying heights?

I'm working on an animation effect where the items appear as an overlay to the previous element on scroll, but when I use animation to translate Y, it adds extra white space at the bottom, which I don't want. I also experimented with the scroll snap effect. But that didn't work either.