how to keep last content with scrolltrigger

Question

I saw a pen with scrolltrigger and wanna use it. But before first scroll content(I mean text in bright green area) is invisible and when I scroll to the bottom content became invisible. how to keep the last content?

here is the pen

and my own script

        gsap.set('.content',{ autoAlpha: 0 })
        gsap.set('.image',{ autoAlpha: 0 })

        var headlines = gsap.utils.toArray(".text");

        var totalDuration = 8000;
        var singleDuration = totalDuration / headlines.length;

        const lineTimeline = gsap.timeline();

        ScrollTrigger.create({    
        trigger: ".pin-up",
        start: "top top",
        end: "+=" + totalDuration,
        //markers: true,
        pin: true,
        scrub: true,
        animation: lineTimeline,
        });

        headlines.forEach((elem, i) => {    
        
                const smallTimeline = gsap.timeline(); 
                    
                const content = document.querySelector('.content-wrap');
                const relevantContent = content.querySelector('div.content-' + i);  
                
                ScrollTrigger.create({    
                    
                    trigger: "body",                        
                    start: "top -=" + ( singleDuration * i ),
                    end: "+=" + singleDuration,
                    animation: smallTimeline,
                    toggleActions: "play reverse play reverse",
                    
                });   

                smallTimeline
                //.to(elem,{ duration: 0.25, fontSize: "40px", color: "orange"}, 0)  
                .to(elem,{ duration: 0.25, color: "orange"}, 0) 
                .to(elem.firstChild,{ duration: 0.25, backgroundColor: "orange", width: "50px"}, 0)                
                .set(relevantContent,{ autoAlpha: 1 }, 0);
        
        });