스크롤트리거 예제 + 부드러운 스크롤 (ScrollTrigger Smooth Scroll (locomotive-scroll) )

GSAP ScrollTrigger

 

스크롤트리거 예제 + 부드러운 스크롤 (ScrollTrigger Smooth Scroll (locomotive-scroll) ) 입니다.

스크롤트리거는 정말 자주 쓰이는데 그때 부드러운 스크롤 효과와 함께 사용할 경우 locomotive-scroll.js 와 함께 사용하면 편합니다.

하단에 스크롤트리거를 이용한 애니메이션 예제와 부드러운 스크롤 효과를 함께준 코드가 있습니다. :)

---

https://codepen.io/kimyangsun/pen/eYQoMLx

스크롤트리거 예제 + 부드러운 스크롤 (ScrollTrigger Smooth Scroll (locomotive-scroll) )

 

 

자바스크립트 코드

"use strict";
gsap.registerPlugin(ScrollTrigger);

window.addEventListener('DOMContentLoaded', function() {
  onInitScrollTrigger();
});

function onInitScrollTrigger(){
  // 스크롤 기준 설정
  ScrollTrigger.defaults({
    scroller: '.wrap',
  });
  
  // LocomotiveScroll 적용
  const locoScroll = new LocomotiveScroll({
    el: document.querySelector(".wrap"),
    smooth: true,
    smoothMobile: true
  });
  locoScroll.on("scroll", ScrollTrigger.update);

  ScrollTrigger.scrollerProxy(".wrap", {
    scrollTop(value) {
      return arguments.length ? locoScroll.scrollTo(value, 0, 0) : locoScroll.scroll.instance.scroll.y;
    },
    getBoundingClientRect() {
      return {top: 0, left: 0, width: window.innerWidth, height: window.innerHeight};
    },
    pinType: document.querySelector(".wrap").style.transform ? "transform" : "fixed"
  });

  /* Sections 트리거 */
  let sections = gsap.utils.toArray('.section');
  sections.forEach((section, i) => {
    gsap.timeline({
      scrollTrigger: {
        trigger: section,
        start: 'top bottom',
        end: 'top 20%',
        scrub: 0.5,
        markers: true,
      }
    })
    .fromTo(section, {scale: 0.8, opacity: 0}, {scale: 1, opacity: 1}, 0)
  })
  sections.forEach((section, i) => {
    gsap.timeline({
      scrollTrigger: {
        trigger: section,
        start: 'bottom 80%',
        end: 'bottom top',
        scrub: 0.5,
        markers: true,
      }
    })
    .fromTo(section, {scale: 1, opacity: 1}, {scale: 0.8, opacity: 0}, 0)
  })

  ScrollTrigger.addEventListener("refresh", () => locoScroll.update());
  ScrollTrigger.refresh();

  // 리사이즈
  window.addEventListener('resize', function() {
    ScrollTrigger.refresh();
  });
}