Manan Vij

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 } });

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>