I have three sections on my site, I want to reveal sections one by one by scrolling. Now the issue is that when I trigger animation with section 2 it's fine for the first two sections while when I trigger animation with section result is not expected what I want. please check my code and correct me on what I have done wrong
<!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" />
<title>Document</title>
<link rel="stylesheet" href="style.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.3/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.3/ScrollTrigger.min.js"></script>
</head>
<body>
<div class="upper-container">
<span>(OUR AWARDS)</span>
<h1>
NOT FOR OUR EGOS, BUT BECAUSE AWARDS ARE A MEASURE OF CREATIVITY,
ORIGINALITY AND QUALITY. AIMING FOR AWARDS PUSHES US TO THINK DEEPER, GO
FURTHER AND HAVE MEANINGFUL CONVERSATIONS ABOUT WHAT CREATIVITY IS.
</h1>
</div>
<div class="section2">
<div class="upper-container2-left">
<h1>OUR AWARDS 1</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam
voluptates, quod, quia, voluptate quae voluptatem quas quibusdam
accusantium quidem voluptatum quos. Quisquam, quae. Quisquam, quae.
Quisquam, quae. Quisquam, quae.
</p>
<button>SEE ALL AWARDS</button>
</div>
<div class="upper-container2-right">
<div class="upper-container2-right-top">
<div class="upper-container2-right-top-left">
<h1>OUR AWARDS</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam
voluptates, quod, quia, voluptate quae voluptatem quas quibusdam
accusantium quidem voluptatum quos. Quisquam, quae. Quisquam,
quae. Quisquam, quae. Quisquam, quae.
</p>
<button>SEE ALL AWARDS</button>
</div>
<div class="upper-container2-right-top-right">
<h1>OUR AWARDS</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam
voluptates, quod, quia, voluptate quae voluptatem quas quibusdam
accusantium quidem voluptatum quos. Quisquam, quae. Quisquam,
quae. Quisquam, quae. Quisquam, quae.
</p>
<button>SEE ALL AWARDS</button>
</div>
</div>
<div class="upper-container2-right-bottom">
<div class="upper-container2-right-bottom-left">
<h1>OUR AWARDS</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam
voluptates, quod, quia, voluptate quae voluptatem quas quibusdam
accusantium quidem voluptatum quos. Quisquam, quae. Quisquam,
quae. Quisquam, quae
</p>
</div>
</div>
</div>
</div>
<div class="section3">
<div class="upper-container2-left">
<h1>OUR AWARDS</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam
voluptates, quod, quia, voluptate quae voluptatem quas quibusdam
accusantium quidem voluptatum quos. Quisquam, quae. Quisquam, quae.
Quisquam, quae. Quisquam, quae.
</p>
<button>SEE ALL AWARDS</button>
</div>
<div class="upper-container2-right">
<div class="upper-container2-right-top">
<div class="upper-container2-right-top-left">
<h1>OUR AWARDS</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam
voluptates, quod, quia, voluptate quae voluptatem quas quibusdam
accusantium quidem voluptatum quos. Quisquam, quae. Quisquam,
quae. Quisquam, quae. Quisquam, quae.
</p>
<button>SEE ALL AWARDS</button>
</div>
<div class="upper-container2-right-top-right">
<h1>OUR AWARDS</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam
voluptates, quod, quia, voluptate quae voluptatem quas quibusdam
accusantium quidem voluptatum quos. Quisquam, quae. Quisquam,
quae. Quisquam, quae. Quisquam, quae.
</p>
<button>SEE ALL AWARDS</button>
</div>
</div>
<div class="upper-container2-right-bottom">
<div class="upper-container2-right-bottom-left">
<h1>OUR AWARDS</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam
voluptates, quod, quia, voluptate quae voluptatem quas quibusdam
accusantium quidem voluptatum quos. Quisquam, quae. Quisquam,
quae. Quisquam, quae
</p>
</div>
</div>
</div>
</div>
<script src="/script.js"></script>
</body>
</html>
gsap.registerPlugin(ScrollTrigger);
gsap
.timeline({
scrollTrigger: {
trigger: ".section2",
pin: true,
start: "top top",
end: "+=300%",
scrub: 1,
},
defaults: {
ease: "none",
},
})
.to(
document.body,
{
delay: 0.2,
backgroundColor: "#f0f0f0",
},
"start"
)
// upper container
.to(
".upper-container ",
{
scale: 0,
},
"start"
)
.to(
".upper-container",
{
opacity: 0,
},
"start"
)
// section2
.to(
".section2",
{
scale: 1,
top: 0,
},
"start"
)
.to(
".section2",
{
opacity: 1,
},
"start"
)
// section3
.to(
".section3",
{
scale: 1,
top: 0,
},
"start"
)
.to(
".section3",
{
opacity: 1,
},
"start"
);
body {
margin: 0;
padding: 0;
font-family: "Open Sans", sans-serif;
background: #f1bdbd;
box-sizing: border-box;
overflow-x: hidden;
}
* {
padding: 0;
margin: 0;
}
/* ::-webkit-scrollbar {
display: none;
} */
.upper-container {
height: 100vh;
position: fixed;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
background-color: royalblue;
/* background-image: url("./visiontabsbg.png"); */
}
.upper-container span,
.upper-container h1 {
padding: 10px 50px;
color: #fff;
}
.section2 {
background-color: rgb(146, 118, 118);
position: relative;
height: 100vh;
width: 100%;
transform: scale(0);
opacity: 0;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.section3 {
background-color: rgb(197, 71, 71);
position: relative;
height: 100vh;
width: 100%;
transform: scale(0);
opacity: 0;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
