Jump to content
Search Community

Create opacity based on scroll

Manan Vij test
Moderator Tag

Recommended Posts

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

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...