HTML code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./gsap.css">
</head>
<body>
<div id="main">
<div id="nav">
<img src="https://static1.squarespace.com/static/5134cbefe4b0c6fb04df8065/t/5bd1e183ec212df24c8d5d0f/1582743997341/squarespace-logo-horizontal-white.jpg?format=1500w" alt="">
<div id="nav-part2">
<h3>Product</h3>
<h3>Template</h3>
<h3>Resourse</h3>
</div>
<div id="nav-part3">
<h4>Log in</h4>
<button>GET STARTED</button>
</div>
</div>
<h1>Everything</h1>
<h1>TO <span>Book now</span>sell</h1>
<h1>Anything</h1>
<div id="leftimg">
<img src="https://images.unsplash.com/photo-1506038634487-60a69ae4b7b1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Nnx8ZnJlZXxlbnwwfHwwfHx8MA%3D%3D&auto=format&fit=crop&w=1400&q=60" alt="">
</div>
<div id="rightimg">
<img src=" https://images.unsplash.com/photo-1507608616759-54f48f0af0ee?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MjB8fGZyZWV8ZW58MHx8MHx8fDA%3D&auto=format&fit=crop&w=1400&q=60" alt="">
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js" integrity="sha512-16esztaSRplJROstbIIdwX3N97V1+pZvV33ABoG1H2OyTttBxEGkTsoIVsiP1iaTtM8b3+hu2kB6pQ4Clr5yug==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="./gsap.js"></script>
</body>
</html>
css code
*{
margin: 0;
padding: 0;
box-sizing: border-box;
color: white;
}
html, body{
height: 100%;
width: 100%;
}
#main{
height: 100%;
width: 100%;
background-color: #000;
}
img{
height: 65px;
}
#nav{
height: 80px;
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
padding:0 30px ;
}
#nav-part2{
display: flex;
gap: 55px;
}
#nav-part3{
display: flex;
gap: 55px;
}
#nav h3{
text-transform: uppercase;
}
#nav h4{
text-transform: uppercase;
margin-top: 20px;
}
#nav button{
background-color: #fff;
color: #000;
padding: 15px 20px;
border: none;
font-weight: 700;
font-size: 16px;
}
#main h1{
font-size: 130px;
text-align: center;
text-transform: uppercase;
display: flex;
align-items: center;
justify-content: center;
}
#main h1 span{
background-color: brown;
font-size: 20px;
padding: 20px 40px;
border-radius: 50px;
margin: 0 30px;
}
#main h1:nth-child(2){
margin-top: 60px;
}
#main>#leftimg img{
height: 230px;
position: absolute;
top: 15%;
left: 5%;
border-radius: 20px;
}
#main>#rightimg img{
height: 280px;
position: absolute;
bottom: 10%;
right: 5%;
border-radius: 20px;
}
Javascript Gsap
var tl=gsap.timeline()
tl.from("#nav img,#nav h3,#nav h4,#nav button",{
y:-100,
duration:1,
delay:1,
opacity:0,
stagger:0.2
})
tl.from("#main h1",{
y:100,
opacity:0,
stagger:0.3,
})
tl.from("#main #leftimg img",{
x:-100,
opacity:0,
stagger:0.3,
})
tl.from("#main #rightimg img",{
x:100,
opacity:0,
stagger:0.3,
})