Combine different scroll effects

[catch22]

I'm new to gsap and scrolltrigger, and limited in english skills.

 

I want to two scroll effects in below.

 

I working with react project, and i want to know these two effects can be combined. (with toggle)

If it can be, please give some examples or hints. (It's okay if not react project)

 

I want to make web page with five sections and flow. (all transitions play by toggle a wheel or touch) 

- On first section, first section goes up when scroll down. and shows second section in layered.

- On second section, jump to third section when scroll down.

- First section comes down over second section when scroll up on second section.

- On the other sections, jump to previous or followed section when scroll.

 

Thanks.

• See the Pen BaowPwo by GreenSock (@GreenSock) on CodePen

• See the Pen NWxNEwY by GreenSock (@GreenSock) on CodePen

See the Pen by (@) on CodePen

[GSAP Helper]

Howdy! I don't have a lot of time right now to dig into everything here, but I wanted to offer you some quick advice about how to get the most out of these forums...

 

Keep it simple. Don't list a bunch of requirements ("it should ___, and ____, and then also ____ while _____ ..." - that's too difficult to follow). Just pick the very first thing and see if you can make that work. If you get stuck, post one question focused on that one piece, like "how can I pin each section one at a time?" Keep your CodePen focused only on that one piece with as little code/markup as possible. Then once that's answered, move on to your next question/problem. 

 

Baby steps 🙂

 

Before you know it, things will fall into place one at a time.

 

You'll get a lot more people willing to help you if you keep things very simple and clear. Give it a try and then if you get stuck, post a minimal demo that isolates the issue. Explain exactly how to reproduce the problem, like "scroll down to the blue section and notice how it pins before it hits the top of the viewport" for example.

 

If you need custom consulting services for figuring out the logic, combining approaches, and solving complexities, you're welcome to either post in the Jobs & Freelance forum, or contact us about paid consulting services. Good luck!