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>