Scrolltrigger opacity pin. Too much text for screen.

[Icareg]

I've got multiple text blocks that fade in/out one by one when scrolling. I'm using pin so that the text is stuck in one place but when the text in one block can't fit on the screen because the screenheight is too small I won't be able to read the full text. Is it somehow possible to know when the textblock is higher than the screenheight so that the pin can be turned off till you've scrolled to the bottom of that text block and then continue with the fading out/in part?

This is my code so far:

                const containers = gsap.utils.toArray(".text");
                containers.forEach((container) => {
                    let tl = gsap.timeline({
                        scrollTrigger: {
                            trigger: container,
                            pin: true,
                            pinSpacing: false,
                        }
                    });

                    tl.to(container, {
                        autoAlpha: 1
                    }).to(
                        container,
                        {
                            autoAlpha: 0
                        },
                        1
                    );
                });

 

[akapowl]

Hello again @Icareg

 

I created a minimal demo in your last thread to visualize things, for your conveniance. Out of courtesy to us - as mentioned in the forum guidelines - it would be great, if instead you could create a minimal demo that gives us a chance to tinker with things and let's us understand your question better in the first place. We'll be happy to point you in the right direction then - but it is just not always possible to give advice by only looking at js code snippets.

 

Thank you!