[Create opacity based on scroll]

I want to make effect just like how the mockups in the website https://mint.intuit.com/

I've made this much but unable to get the opacity of text and mockups changed from 0 to 1 then 0.

The output I've achieved so far looks like in codepen. This looks without images.

I want that the text Hello02 which comes should have opacity 0>-1->0 when new text Hello03 comes 

Can you please help.

<div style="background-color: yellow; height: 100vh;"></div>
        <div class="row" style="background-color: #070707;">
            <div class="col-lg-6" style="display: flex; height: 100vh; flex-direction: row; justify-content: center">
                <div class="txt1" style="display: flex; flex-direction: column;; justify-content: center;"><h1 style="color: #fff;">Hello01</h1></div>
            </div>
            <div class="col-lg-6" style="display: flex;">
                <div style="display: flex; flex-direction: column; justify-content: center;">
                    <div class="phone" style="position: absolute; z-index: 100;">
                        <img src="./public/Group_27-removebg-preview.png" style="position: relative; z-index: 100;" alt="">
                    </div>
                    <div style="position: relative; z-index: 99;">
                        <img class="img1" src="./public/5.png" alt="" style="width: 12.5rem; position: relative;"> 
                    </div>
                </div>
            </div>
        </div>
        <div class="row" style="background-color: #070707;">
            <div class="col-lg-6" style="display: flex; height: 100vh; flex-direction: row; justify-content: center">
                <div class="txt2" style="display: flex; flex-direction: column;; justify-content: center;"><h1 style="color: #fff;">Hello02</h1></div>
            </div>
            <div class="col-lg-6" style="display: flex;">
                <div style="display: flex; flex-direction: column; justify-content: center;">
                    <img class="img2" src="./public/6.png" alt="" style="width: 12.5rem;">
                </div>
            </div>
        </div>
        <div class="row" style="background-color: #070707;">
            <div class="col-lg-6" style="display: flex; height: 100vh; flex-direction: row; justify-content: center">
                <div class="txt3" style="display: flex; flex-direction: column;; justify-content: center;"><h1 style="color: #fff;">Hello03</h1></div>
            </div>
            <div class="col-lg-6" style="display: flex;">
                <div style="display: flex; flex-direction: column; justify-content: center;">
                    <img class="img3" src="./public/5.png" alt="" style="width: 12.5rem;">
                </div>
            </div>
        </div>
    <div style="background-color: yellow; height: 100vh;"></div>

        let tl = gsap.timeline({
    scrollTrigger: {
      trigger: ".txt1",
      pin: true,   
      start: "top top", 
      end: "+=650", 
      scrub: 1, 
    }
  });
  let t2 = gsap.timeline({
    scrollTrigger: {
      trigger: ".txt2",
      pin: true,  
      start: "top 10", 
      end: "+=650", 
      scrub: true, 
      toggleActions: 'play reverse play reverse'
    }
  });
  let t3 = gsap.timeline({
    scrollTrigger: {
      trigger: ".phone",
      pin: true,   
      start: "top 10", 
      end: "+=1300",
      scrub: true,
      markers: true
    }
  });

 

See the Pen by pen (@pen) on CodePen

[Animation of element based upon scroll height of div]

I'm trying to create animation of shapes like triangles, lines just like my inspiration website https://onepage.saasland.droitthemes.com/

I'm unable to make movement linked to scroll and is moving continuously.

I've written this code:

  gsap.to(".triangle", {
    scrollTrigger: {
      trigger: '.fifth-div ',
      start: "top center",
      end: "bottom top",
      // pin: true,
      scrub: 1.5,
      markers: true
    },
    x: 100,
    yoyo: true,
    repeat: -1,
  })

          <div class="fifth-div">
            <div style="text-align: center;">
              <h3>Lorem</h3>
              <h5 style="padding: 0 15vw">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eum, dolorem Lorem ipsum dolor sit amet consectetur adipisicing elit. .</h5>
            </div>
            <div class="row">
                <div class="col-lg-4 col-md-4 col-sm-12">
                    <img src="./public/2.png" style="width: 65%;" alt="">
                </div>
                <div class="col-lg-8 col-md-8 col-sm-12" style="display: flex;">
                  <div style="display: flex; flex-direction: column; justify-content: center;">
  
                      <div class="row fifth-row1">
                          <div class="col-lg-6 col-md-6 col-sm-12">
                              <img src="" alt="">
                              <h2>Lorem ipsum dolor sit amet.</h2>
                              <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit.</p>
                          </div>
                          <div class="col-lg-6 col-md-6 col-sm-12">
                              <img src="" alt="">
                              <h2>Lorem ipsum dolor sit amet.</h2>
                              <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit.</p>
                          </div>
                      </div>
                      <div class="row fifth-row2">
                          <div class="col-lg-6 col-md-6 col-sm-12">
                              <img src="" alt="">
                              <h2>Lorem ipsum dolor sit amet.</h2>
                              <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit.</p>
                          </div>
                          <div class="col-lg-6 col-md-6 col-sm-12">
                              <img src="" alt="">
                              <h2>Lorem ipsum dolor sit amet.</h2>
                              <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit.</p>
                          </div>
                      </div>
                  </div>
                </div>
            </div>
              <div class="triangle">
                <img src="./public/tri_green.png" style="position: absolute; width: 5%; z-index: -1;" alt="">
              </div>

  

  
          </div>