javascript 다음섹션이 이전 섹션을 덮기 stacked scroll trigger gsap

 

stacked section

 

 

다음 섹션이 이전 섹션을 덮는듯하게 보이는 효과입니다.

 

https://unpkg.com/gsap@3/dist/gsap.min.js

https://unpkg.com/gsap@3/dist/ScrollTrigger.min.js

 

두 라이브러리를 사용했습니다.

 

한 섹션만 덮는 효과를 내고 싶으면 

sec3->sec4

sec3을 sec4가 덮는 느낌을 내고 싶다면

let panels = gsap.utils.toArray(".section");

.section 부분에 .sec3 을 넣어줘야합니다.

 

 

 

html

<div class="section sec1">
  <span class="text">section 1</span>
</div>
<div class="section sec2">
  <span class="text">section 2</span>
</div>
<div class="section sec3">
  <span class="text">section 3</span>
</div>
<div class="section sec4">
  <span class="text">section 4</span>
</div>

 

 

css

body{
  padding:0; margin:0;
}
.section{
  width:100%; height:100vh;
  position:relative;
}
.section .text{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  font-size:90px;
  font-weight:600;
  color:#fff;
  border:10px solid #fff;
  padding:80px;
}

.sec1{
  background:red;
}
.sec2{
  background:orange;
}
.sec3{
  background:green;
}
.sec4{
  background:blue;
}

 

 

javascript

let panels = gsap.utils.toArray(".section");
let tops = panels.map(panel => ScrollTrigger.create({trigger: panel, start: "top top"}));
panels.forEach((panel, i) => {
  ScrollTrigger.create({
    trigger: panel,
    start: () => panel.offsetHeight < window.innerHeight ? "top top" : "bottom bottom",
    pin: true, 
    pinSpacing: false 
  });
});