I want to pinned the div in the half of the screen with 50 viewport and then after scroll next 50 view port will be visible.

[jd19]

Want to develop and animation of scroll trigger where we scroll and first half section will appears and then after further scroll second half seciton will reveal.
Here section 1 is disappears while reach to the top and then section 2 is also disappears. 

Link of code sandbox attached: https://codesandbox.io/s/section-to-be-scrolled-half-and-pinned-ycc4no?file=/src/App.tsx

 

[Rodrigo]

Hi,

 

I read your questions a few times and looked at the code you have and I'm not sure I follow what you're trying to do.

 

Do you have a example of a website or app that works in the way you intend? You mention that section 1 disappears and also section 2, but I can see both of them scroll normally. The code you have in place is doing exactly what's supposed to do 🤷‍♂️

 

Happy Tweening!

[jd19]

Hi @Rodrigo First of all i would like to thank you for coming here to helping me. 
Actually i have a scenerio in my mind that section 1 should be pinned to the top of the pink block and untill further scroll section 2 will come while section 2 will completely render then on further scroll whole sectionParent will scroll. 

I hope i'm explain. I'll share you some snapshot of the animation something like the images attached. 

[Rodrigo]

Hi,

 

Maybe you're looking for something like these examples?

 

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

 

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

 

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

 

Hopefully this helps.

Happy Tweening!

[jd19]

Thanks for sharing those animations but still. I'm very confused about how two paragraphs will come into screen one after another. In that case also first paragraph will come into view and text masking happens and when first paragraph will complete the animation then the second paragraph came into view. 

 

[Rodrigo]

Hi,

 

I'm not sure I follow exactly what you're looking for, but maybe this could be a good starting point if you mix it with some of the effects I posted before:

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

 

Hopefully this helps.

Happy Tweening!

[jd19]

thank you @Rodrigo I think this would help me a lot.