DEV Community

Cover image for Created Home page using Gsap 
libraries. e-commerce website home page blog-1
Mohammed Riyas
Mohammed Riyas

Posted on

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

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>
Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode

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
    }
},);
Enter fullscreen mode Exit fullscreen mode

Image description

Image description

Image description

Image description

Image description

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

Discussion (1)

Collapse
riyas07 profile image
Mohammed Riyas Author

questions are always welcome.