Animation of element based upon scroll height of div

[Manan Vij]

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>

 

[Cassie]

Hey there!

 

You've linked an infinite animation to a finite scroll distance.

Try changing repeat to repeat: 3 or another finite number ✨