Manan Vij Posted December 3, 2021 Share Posted December 3, 2021 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 Link to comment Share on other sites More sharing options...
OSUblake Posted December 3, 2021 Share Posted December 3, 2021 Hi Manan, Can you put that in a minimal demo. It's very hard to answer ScrollTrigger questions without a working demo. Thanks! Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now