lko

In this website, how can I recreate the third/fourth section? The one where there is a lot of text that scrolls trough with some bottles and then transitions with a single bottle and the completed text behind it. My main question is, how tall the section should be? Ok, each column has X letters, so the div should be at least tall as the all the letters, but then, the word "KMBCH" forms and it slides down and I can keep scrolling, how much should that be tall? should I just make a random height? How can I also approach the challenge to recreate it? I have 5 columns of text, I think i'll just .set two of those to -100vh and then when the screen touches the trigger it will set them to the right position, suggestions?

As you can see from this gif, for some reason my <section> is doubled (the original one is 100vh and with a bg of light blue), why does it happen? How can I fix it? Because I dont want another 100vh of unused space. Im new to GSAP, so im still learning. In the codepen I made the background of the parent pink to make it see better.