gsap

gsap) full page/full screen page 만들기 (+ScrollTrigger, ScrollToPlugin)

Kale_coding 2022. 7. 25. 17:04

gsap 라이브러리를 이용해서 스크롤 할 때 마다 풀페이지로 넘어가는 스크립트 작성하기

 

gsap CDN

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.0/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.0/ScrollTrigger.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.0/ScrollToPlugin.min.js"></script>

HTML

<body>
  <section class="panel s1">
    <p>Page 1</p>
  </section>
  <section class="panel s2">
    <p>Page 2</p>
  </section>
  <section class="panel s3">
    <p>Page 3</p>
  </section>
  <section class="panel s4">
    <p>Page 4</p>
  </section>
</body>

CSS

* {box-sizing: border-box;}
html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
.panel {
  width: 100%;
  height: 100%;
  display: flex;
  align-item: center;
  justify-contents: center;
}
.p {font-size: 6vw;}
.s1 {background: red;}
.s2 {background: green;}
.s3 {background: blue;}
.s4 {background: orange;}

각 섹션의 너비, 높이값을 창 전체를 채우는 값을 지정함

JS

gsap.registerPlugin(ScrollTrigger);
gsap.registerPlugin(ScrollToPlugin);

let sections = gsap.utils.toArray(".panel");

function goToSection(i) {
  gsap.to(window, {
    scrollTo: { y: i * innerHeight, autoKill: false, ease: "Power3.easeInOut" },
    duration: 0.85
  });
};

sections.forEach((eachPanel, i) => {
  ScrollTrigger.create({
    trigger: eachPanel,
    onEnter: () => goToSection(i)
  });

  ScrollTrigger.create({
    trigger: eachPanel,
    start: "bottom bottom",
    onEnterBack: () => goToSection(i)
  });
});

 

참고페이지

https://codepen.io/urbgimtam/pen/XWXdypQ