How to keep scroll to the end of section when pin the container?

[Krix]

In my case, each section has a dynamic height and I expect to when the current section scroll to the end of it, the fadeout animation will play and fade in the next section. But when I pin the container, the section that has more than 100vh will pin and not scroll to the end.

 

use can see the example project here: https://codesandbox.io/s/cool-shape-lnywsh?file=/src/App.tsx

[Krix]

@Cassie, sorry to bother you but can you spend a moment thinking about my problem.

[GreenSock]

I'm not sure I understand your goal correctly, but if you're trying to make each section scrollable until it ends, I think you'd need to completely change your setup. There are several ways to approach it actually. One might be similar to this: 

See the Pen abwzvbJ by GreenSock (@GreenSock) on CodePen

 

Or maybe build the "scroll" into your timeline by faking it with a y tween. 

 

Unfortunately it's beyond the scope of free help we can offer in these forums to build something for you, but hopefully that gets you going in a good direction. If you get stuck, feel free to post your revised minimal demo. You can also contact us about paid consulting services if you need experts to walk alongside you and help build out a demo illustrating a solution. 

[Rodrigo]

Hi,

 

On top of Jack's example, maybe this thread can provide a few valuable pointers:

 

Hopefully this helps.

Happy Tweening!