gsap 처음 써보는데 회사 프로젝트에 적용하는 사람이 있다?!?! 그게 나야ㅣ.. 뚬바 둠바 두비두밥

사용 스택

react와 typescript를 사용했고, css는 emotion을 사용했다. 개인적으로 처음에는 좋았는데 점점 이름짓기가 귀찮다. 다음부터는 sass 사용해야지. 그리고 yarn을 깔았고, 인터렉티브한 애니메이션을 위해 gsap와 스크롤 시 애니메이션이 나오게끔 scrollTrigger도 깔았다. scrollTrigger는 gsap 플러그인이다. 한국어로 된 자료가 별로 없다. 아쉽다. 정말 좋은 라이브러리인데 생각보다 복잡하다. 이걸 처음 접하고 바로 프로젝트에 쓰는 깡 좋은 나...

초기 세팅

일단 HomeAni(이름 더럽게 못짓는다.)

import { useEffect, useRef } from "react";
import { gsap } from "gsap";
import { ScrollTrigger } from "gsap/dist/ScrollTrigger";

gsap.registerPlugin(ScrollTrigger);

export const HomeAni = () => {
  const elementRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const el = gsap.utils.selector(elementRef);

    if (elementRef.current) {
      const tl = gsap.timeline({
        scrollTrigger: {
          trigger: elementRef.current,
          start: "top top",
          end: "+=2000",
          toggleActions: "play none reverse none",
          markers: true,
          anticipatePin: 1,
          scrub: true,
          pin: true,
        },
      });

      tl.fromTo(
        el(),
        { },
        {
          
        }
      )
        .to(el(), {
          
          scrollTrigger: {
            start: "50px",
            end: "center center",
          },
        })
        .fromTo(
          el(),
          { },
          {
          }
        )
        .fromTo(
          el("),
          {  },
          {
          }
        );
    }
  }, [elementRef]);

  return elementRef;
};

그리고 Home

import { useEffect, useRef, useState } from "react";

import FindButton from "../../components/commons/button/findButton";
import * as S from "./Home.styles";
import Section1 from "./units/section1";
import { HomeAni } from "./Home.container";

export default function Home() {
  const elementRef = HomeAni(); // 연결하기

  return (
    <S.HomeWrapper>
      <FindButton />
      <Section1 elementRef={elementRef} /> // props로 넘겨주기
    </S.HomeWrapper>
  );
}

그리고 Section1에 contents를 코딩해서 넣어주면 된다.

소스는 다 codepen에서 scrollTrigger 쳐서 참고했다.

참고한 소스는 링크로 남겨두겠다.

우선 지금 따라해볼 건
https://codepen.io/cameronknight/pen/qBNvrRQ
이 링크에 가면 볼 수 있는 가로 애니메이션을 해볼 예정이다. 간단하게 따라할 수 있을 것 같다.(근자감)

우선 yarn add gsap locomotive-scroll을 해준다.

엥 왜 안되냐

yarn add --dev @types/locomotive-scroll

이거 하래서 이것도 해봤는데 오류뜸

깔아도 깔아도 이상있어서 껏다 키니까 되네... 이런.

이제 슬슬 해보자면 일단 이미지랑 제자리에 다 놔주고..

이걸 2틀정도 하고 난 지금 react로는 안될거라는 생각에 바닐라js로 넘어왔다.

보일러 플레이트

그리고 라이브러리는 딱 2개, scss랑 gsap를 사용할 예정이다.

라이브러리 설치

sudo npm install -g sass
sass --watch scss/style.scss css/style.css
그리고 style.scss 파일 안에
@charset "UTF-8";
@import "reset";
이렇게reset을 불러와준다.

html head 태그 안에 아래와 같이 링크와 스크립트를 넣어주었다.

<link rel="stylesheet" href="./css/style.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
<script type="module" src="./index.js"></script>

이제 이미지와 폰트도 파일에 넣어주면 세팅 끝!

js파일 gsap 세팅

gsap.registerPlugin(ScrollTrigger);

window.addEventListener("load", function () {

//여기에 gsap세팅!

  ScrollTrigger.refresh();
});

gsap는 잘 꼬이기 때문에 한 줄, 한 줄 확인하면서 코딩하는게 중요할 듯 하다.
꼬인다는 건 css나 html과 부딧친다는 말인데, 내가 경험한 바로는 그렇다.
이것때문에 다시 하는 것도 있고, 아직 react로 된 gsap 데모보다는 바닐라js로 된 레퍼런스가 더 많기 때문이기도 하다.

일단 글을 마무리해보고, 프로젝트가 끝나면 회고를 써야겠다.

---

• 이게 이게 끝났는데 음... 다시 리액트로 해봐야할거같다.
  프롤우가 이상한건지 너무 잘 끊긴다.
  gsap를 쓰는 의도와 달리 굉장히 안예쁘다.
  음 좀 더 반응형이 들어가야해서 rem으로 단위를 다 바꾸고, % 쓰고 이랬는데 form태그 쓸 때, 리액트가 그리워졌다. 컴포넌트화 할게 너무 많아서 그럴때마다 리액트가 그리워졌다. 컴포넌트화... js에서도 가능하지만 나는 애석하게도 스크립트를 잘 짜는 사람이 아니다. 라이브러리가 더 편하다.. 물론 공부는 할 거지만 리액트로 되었으면 좋겠다.