how to keep show last content with scrolltrigger

I use a pen with scrolltrigger but it does not show content at first(before scrolling).I mean the bright green area is blank at first but I want to show first content before section pinned and keep the last content after section continue scroll down

here is the pen

and the script I use

        gsap.set('.content',{ 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);
        
        });