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 ); });

I've got a simple image that has a default opacity: 0 in my css. Halfway through the page I set the opacity to 1 with the following code: gsap.to(simpleImage, { opacity: 1, ease: 'none', scrollTrigger: { trigger: trigger1, start: 'top 100%', end: 'top 75%', } }) When scrolling a bit more down I set the opacity back to 0 with the following code: gsap.to(simplmeImage, { opacity: 0, ease: 'none', scrollTrigger: { trigger: trigger2, start: 'bottom 100%', end: '100', } }) When the simple image has opacity 0 I scroll back up but it's not reversing the second trigger. It only goes back to opacity 1 when I hit the first trigger. Why Is it not going back to opacity 1 in the second trigger by scrolling back up?