✔ 가로스크롤?

Scroll을 내리면 가로로 Scroll되는 애니메이션

포트폴리오에 사용하기 위해 이 기능을 구현해보고 싶었다.
구글링하면 금방하겠지 생각했지만, 3일이나 걸렸다...
초보자들에겐 쪼금 난이도가 있다고 초보자인 나(?)의 의견🥹ㅋㅋㅋ

까먹을까봐 간단하게 정리 Let's go!

---

✔ 시행착오

1. JavaScript로 시도해보려했는데 너무 어려웠다. 마치 고대언어를 읽는 느낌. 시간이 많지 않으니 JavaScript는 내공을 쌓은 다음에 분석해볼 예정이다.

2. React로 구현해보려 했지만, React만으로는 자연스러운 느낌을 내기에는 부족...구글링을 해보면 대부분 손쉬운 라이브러리들이 많았다. 하지만 그만큼 자유도는 없기 때문에 이런 라이브러리들은 패스.

✅ GSAP

그래서 가장 많이 사용되는 Gsap 라이브러리를 이용해 가로스크롤을 구현해보았다. GSAP은 가로스크롤 뿐만 아니라 정말 다양한 애니메이션을 만들 수 있는 강력한 라이브러리므로 선택하게 되었다.

강의를 듣고 구현하기에는 시간이 촉박해서, 다른 개발자들의 Github 소스 코드, 블로그를 참고해서 공통점을 분석하고 속성으로 구현해보았다.

---

✔ 구현방법

설치

npm install gsap

import에서 오류 발생하면?

import { gsap } from "gsap";
import { ScrollTrigger } from "gsap/dist/ScrollTrigger";

이 부분에서 ScrollTrigger는 "gsap/ScrollTrigger"로 불러오면 아래처럼 오류가 난다.

그래서 "gsap/dist/ScrollTrigger"로 불러와야 정상적으로 작동이 된다.
이유는 찾지 못했지만, 오류가 난다면 이 방법을 이용봐라.

Gsap을 이용한 가로스크롤 코드 😎

사용한 기능을 주석으로 간단하게 정리했다.

export default function Project() {
  gsap.registerPlugin(ScrollTrigger); // ScrollTrigger시 필수
  const sectionRef = useRef(null); // useRef로 참조할 요소
  const triggerRef = useRef(null);

  // horizontal 스크롤 애니메이션
  useEffect(() => {
    const pin = gsap.fromTo( // from, to, fromTo가 있다.
      sectionRef.current, // Gsap 애니메이션이 시작되는 요소 위치
      { translateX: 100 }, // from 부분(초기 시작)
      {
        translateX: -6400, // to 부분
        ease: "none", // 쓸데없는 애니메이션 없애는 부분
        scrollTrigger: { // 스크롤 애니메이션 발생하는 부분
          trigger: triggerRef.current, // 스크롤이 발생되는 요소 위치
          start: "top top", // "요소위치 시작위치"
          end: "bottom center", // "요소위치 끝위치"
          scrub: 0.7, // 되감기 기능, 또한 스크롤을 부드러운 애니메이션 추가.
          pin: ".project-section", // 가로스크롤시 페이지를 고정할 수 있는 기능
        },
      }
    );
    return () => {
      pin.kill(); // 모든 애니메이션 중단
    };
  }, []);
  
  return (...다음 소스코드에...)
}

tailwind로 CSS작업해서 코드가 조금 길고 복잡하다.

<section
 id="project"
 className="relative project-section flex flex-col items-center"
>
  <h2 className="absolute top-10 font-thin">- P R O J E C T -</h2>
  <motion.div 
      ref={triggerRef} 
      className="bg-orange-300 h-[100vh] w-full flex items-center"
  > 
    👉 여기서부터 Gsap 애니메이션 시작 
    <div ref={sectionRef} className="flex flex-row"> 
    👉 여기 요소에서 ScrollTrigger 발생
       {[1, 2, 3, 4, 5, 6, 7].map((i) => (
          <div
             key={i}
             className="w-[850px] h-[850px] bg-gray-400/30 
                        mr-[200px] flex justify-center items-center"
          >
          {i}
          </div>
        ))}
    </div>
  </motion.div>
</section>

---

추가) 다른 기능

toggleActions

toggleActions: "onEnter, onLeave, onEnterBack, onLeaveBack"

---

✔ 완성

3일만에 완성...감격 🫠
이제 내용만 채우면 된다!!!

---

✔ 이슈 & 배운점

1. Framer-motion의 매력에 빠져, Gsap은 뒷전이었다. 이번 계기를 통해서 GSPA은 프론트엔드에게 필수라는 점을 여실히 느꼈다. 어쨋든 가로스크롤 기능을 습득할 수 있었고, GSAP 전반적인 기능을 배울 수 있었다. 시간나면 강의 하나 완독해야겠다.

2. Github, 블로그를 찾아보면서 정말 고수들이 많다는 것 느끼게되었다. 또한, 외국 사이트를 많이 봤는데 어느센가 StackOverFlow를 읽고 있는 나 자신을 발견했다. 역시 전세계에도 코딩을 잘하는 사람이 많다는 걸 느꼈고 영어랑도 친해져야겠다는 생각이 들었다.

끝~!