revolutionnaire

Thanks so much for being patient with me. It's great that you got it to work, but I'm confused. Sorry. How did the horizontal scroll get triggered by scrolling without a ScrollTrigger? Does ScrollTrigger work even with tweens applied to the descendants of the trigger? How does ScrollTrigger care about duration? I've separated my timelines into intro and outros of sections. I placed the stacked sections into one timeline. Still learning how to do it properly. I thought one timeline is ideal, but based on the link you sent, it's not.

I got the animation to work, but I'm struggling with ScrollTrigger. Is it okay if I get some help? I didn't mention this, but there's a horizontal scrolling section involved, so I included it in the code. Here it is: https://codesandbox.io/s/uncover-and-cover-a-section-ghmsg3?file=/src/index.js:376-515

Oh, okay. Got it.

Thanks for the links. I'll take a look at GSAP's and Carl's YouTube channel About your forked sandbox (and at the risk of sounding bratty, sorry): that's not exactly what I want. I want the third section to cover the second section when it scrolls into view. That's why I commented out the ScrollTrigger on both tween: to show you the outcome I want to happen—aside from it not working.

Is this possible with ScrollTrigger? Can the position of #section-3 be reset, when the tween is done? That way, it's already in the viewport.

Thanks! This is probably just beginners' frustration. So I did some googling and I found this. https://codepen.io/GreenSock/pen/BaowPwo Does ScrollTrigger work with more than one tween in one declaration? In here, it seems like it does. I thought it only works on one tween per ScrollTrigger. I implemented this, and I was also wondering if I'm correct, that end: '+=300%' adds the necessary space to .pin-spacer so that the page scrolls even if they're all stacked on top of each other and the height of #container is the height of one section.

Is it possible to do this to three consecutive sections? The first and second sections nested under the .overlap div will uncover the following section. I'm just implementing it now, and I'm not sure how the ScrollTrigger will work, if it's even possible.

Thanks! That makes a lot of sense. I'll do that.

Is it best practice to separate the animation from the ScrollTrigger, which you placed in the timeline? I'm not exactly sure what makes it easier to understand, when you separate it from the animation.

Wow! I was doubting it was possible, but you made it happen. Thanks!

I've updated the sandbox: https://codesandbox.io/s/uncover-next-fold-l3zl7q. For some reason, setting the position of #fold-3 and#fold-4 to absolute doesn't seem to work, so I just used relative.

Wouldn't the top of '#fold-4' and '#fold-3' be the same if they are overlapped using CSS?

Thanks! I thought GSAP can actually do that without overlapping the two sections in the layout. I asked because the height of the scrollable items would be reduced. How can I trigger the animation using ScrollTrigger if they are overlapped in the layout?

Is it possible for the current fold on the viewport to uncover the next fold? This is what I'm doing right now, but I can't seem to achieve the effect I want to achieve: https://codesandbox.io/s/uncover-next-fold-l3zl7q

Thanks for taking time to work on this! ?