How much tall should the section be for this animation?

[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?

[GSAP Helper]

We love helping with GSAP-related questions, but unfortunately we just don't have the resources to provide free general consulting, logic troubleshooting, or "how do I recreate this cool effect I saw on another site?" tutorials. Of course anyone else is welcome to post an answer if they'd like - we just want to manage expectations.  

 

If you're looking for ScrollTrigger effects, I'd recommend looking at the demos at https://greensock.com/st-demos and https://codepen.io/collection/DkvGzg and https://codepen.io/collection/AEbkkJ - you may be able to use one of those as a jumping-off point. 

 

You are welcome to post in the "Jobs & Freelance" forum for paid consulting, or contact us directly. 

 

Otherwise, if you've got a GSAP-specific question just post that here along with a minimal demo and we'd be happy to take a look.