Created Home page using Gsap libraries. e-commerce website home page blog-1

#html #javascript #gsap #webdev

1: HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Heebo:wght@600&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="Dev_mart.css">

    <title>Document</title>
</head>
<body>
    <div class="sq"></div>
    <div class="sq1"></div>
    <div class="sq2"></div>
    <section class="sec1">
        <nav class="nav">
            <h5 class="quotes">It's not about brand <br/>it's about style</h5>
         <ul class="links">
             <li>
                 <a href="">Home</a>
             </li>
             <li>
                <a href="">Products</a>
             </li>
             <li>
                <a href="">Login</a>
             </li>
             <li class="dropdown">
                <a href="">Account</a>
                <div class="drop">
                  <ul>
                      <li><a href="">Cart</a></li>
                      <li><a href="">Orders</a></li>
                      <li><a href="">Logout</a></li>
                  </ul>
                </div>
             </li>
         </ul>
        </nav>
        <h1 class="logo">Dev Mart</h1>
    </section>
    <section class="sec2">
        <div class="intro">
            <h1>Rihanna</h1>
            <p class="txt1">The way I dress depends on how I feel.</p>
        </div>
        <img src="./images/girlblack.jpg" alt="">
        </section>
        <section class="sec2">
            <img src="./images/boy.jpg" alt="">    
            <div class="intro">
        <h1>Sam</h1>
            <p class="txt1">Keep your outfit cool</p>
        </div>
        </section>
            <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/gsap.min.js" integrity="sha512-eP6ippJojIKXKO8EPLtsUMS+/sAGHGo1UN/38swqZa1ypfcD4I0V/ac5G3VzaHfDaklFmQLEs51lhkkVaqg60Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
            <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/ScrollTrigger.min.js" integrity="sha512-CPA5LMoJI/a5HkSIAKcBtFXe4gqGjPUL2ExF/3PmhrrHI17wod9xOqqF+0WZQRKIIq0KwF8oG5BaiWobtrke3A==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
            <script src="Dev_mart.js"></script>
</body>
</html>

2: CSS

*
{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.sec1
{
    width: 100%;
    height: 100vh;
}
.nav
{
    width: 100%;
    height: 10%;
    display: flex;
    align-items: center;
    background-color: white;    
}
body
{
    font-family: 'heebo',sans-serif;
}
.links 
{
 display: flex;
 position: absolute;
 left: 65%;
}
.links li
{
    list-style: none;
   margin-left: 1.5rem;
}
.links li:hover a
{
    color: forestgreen;
    transition: all ease 0.5s;
}
.links li a
{
    text-decoration: none;
    color: #000;
}
.dropdown:hover .drop
{
    display: block;
    transition: all ease 0.5s;
} 

.drop
{
 position: absolute;
display: none;
transition: all ease 0.5s;
}
.drop ul
{
    width: 20vh;
    height: 19vh;
    transition: all ease 0.5s;
    background-color: white;
    position: absolute;
}
.drop ul li
{
    margin-bottom: 0.5rem;
    list-style: none;
}
.logo
{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%) scale(4);
}
.sec2
{
    width: 100%;
    color: white;
    height: 100vh;
    display: flex;
    justify-content: space-around;
    align-items: center;
    background-color: #000;
}
.sec2 img
{
    height: 100vh;
}
.sq
{
    width: 5rem;
    height: 5rem;
    background-color: rgba(240, 11, 11, 0.856);
position: absolute;
top: 60%;
left: 70%;
}
.sq1
{
    width: 3rem;
    height: 3rem;
    background-color: #000;
position: absolute;
top: 63%;
left: 80%;
}
.sq2
{
    width: 1.5rem;
    height: 1.5rem;
    background-color: rgb(71, 85, 71);
position: absolute;
top: 65%;
left: 86.5%;
}

2: JavaScript

let tl1=gsap.timeline({
    scrollTrigger:{
        trigger:".sec1",
        start:"0%",
        end:"90%",
        scrub:1
    }
},);
let tl2=gsap.timeline({
    scrollTrigger:{
        trigger:".sec1",
        start:"0%",
        end:"90%",
        scrub:1
    }
},);

tl1.fromTo(".quotes",{y:0},{y:-400});
tl2.fromTo(".logo",{scale:4},{scale:1,top:"1rem",left:"3rem",x:"50%",y:"50%"});
let tl4=gsap.timeline({
    scrollTrigger:{
        trigger:".sec",
        start:"0%",
        end:"90%",
        scrub:1
    }
},);
let tl5=gsap.timeline({
    scrollTrigger:{
        trigger:".sec",
        start:"0%",
        end:"80%",
        scrub:1
    }
},);
let tl6=gsap.timeline({
    scrollTrigger:{
        trigger:".sec",
        start:"0%",
        end:"70%",
        scrub:1
    }
},);
tl4.fromTo(".sq",{left:"70%"},{left:"100%",opacity:0,rotate:"360%"});
tl5.fromTo(".sq1",{left:"80%"},{left:"107%",opacity:0,rotate:"360%"});
tl6.fromTo(".sq2",{left:"86.5%"},{left:"110%",opacity:0,rotate:"360%"});



let tl3=gsap.timeline({
    scrollTrigger:{
        trigger:".sec1",
        start:"0%",
        end:"400%",
        scrub:1,
        pin:true,
        pinSpacing:false
    }
},);

simple frontend home page using gsap libraries. i used gsap scroll trigger library, what it does is while scroll the vertical bar down it trigger the animation. if you have any queries regarding gsap or any suggestion please contact me through muhammedriyas6262@gmail.com