GSAP으로 애포자(애니메이션 포기자) 탈출하기

#beginners #css #javascript #animation

애포자 이야기

나는 프론트엔드 포지션으로 일하고 있지만 항상 css에 대한 두려움이 있었다. css 같은 경우에는 한 엘리먼트에 적용되는 스타일이 부모나 다른 엘리먼트의 속성에 영향을 받기에 힘들었다. 어쩔 수 없이 강제적으로 일을 하면서 css를 만지면서 유지보수를 하게 되니 예전보다는 잘하게 됐지만, 여전히 디버깅이 어렵다.

그런 나날이 이어지는 가운데 결전의 날이 다가왔다. 사내 디자인 시스템으로 구현하지 못하는 애니메이션을 구현하라는 요구사항이 날아온 것이다. 요구사항을 받은 순간 머리가 띵하고 걱정이 솟구쳤다. 애니메이션을 구현해본 경험이 얼마 없을 뿐더러 굉장히 못하는 것을 알기 때문이다. 하지만 개인프로젝트가 아니라 업무였기 때문에 온몸비틀기를 해서라도 구현을 했야 됐다. 이렇게 css 및 애니메이션에 쥐약인 사람들에게 이 글이 도움이 되기를 바란다.

GSAP이란 무엇인가

GSAP은 GreenSock Animation Platform의 줄임말이다. GreenSock이 어떤 조직인지 궁금하다면 https://github.com/greensock에서 확인 가능하다. 오픈소스 단체인 것으로 추정된다. 어떻게 발음할지도 굉장이 혼란스러웠는데 ASAP에서 첫글자 A 대신에 G를 넣은 것처럼 [쥐:셉]이라고 발음하면 된다.

GSAP이 뛰어난 이유

프레임워크 독립성(framework-agnostic): javascript를 실행시킬 수 있는 환경에서 모두 돌아갈 수 있다. React에서 Next.js로 마이그레이션할 때도 부담없이 사용 가능하다. framer motion 같은 경우에는 react 전용 애니메이션 라이브러리이기 때문에 한번 사용하는 순간 Svelte 같은 라이브러리로의 마이그레이션 코스트가 더욱 높아진다.

타임라인 기반 애니메이션 정의: 애니메이션이란 각각의 css 속성이 변환되는 타이밍을 제어하는 과정이라고 봐도 과언이 아니다. gsap.timeline()으로 타임라인 객체를 받는다면, 특정 애니메이션의 호출 전/후에 어떤 애니메이션이 호출되어야 하는지 정의하여 구현이 가능하다.

프로덕션에서 검증: 구글, 마이크로소프트뿐만 아니라 전세계적으로 많은 회사들이 사용하고 있다. https://github.com/greensock/GSAP/issues?q=is%3Aissue%20state%3Aclosed 를 확인해보면 이슈 관리도 상당히 잘 되고 있는 편이다.

Syntax

예제 코드를 보면서 알아보자.

function Component() {
  const boxRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const tl = gsap.timeline();

    tl.fromTo(boxRef.current, {
      opacity: 0,
    }, {
      opacity: 1,
    }).to(boxRef.current, {
      x: "+=200",
      y: 200,
    }, ">1");
  }, []);

  return (<div css={{ width: 500, height: 500, }}>Box1<div/>);
}

useRef를 이용하여 element를 저장하고, 이를 gsap.to또는 gsap.fromTo 함수에 넘겨서 요소에 애니메이션을 넣을 수 있다.
gsap.to 및 gsap.fromTo를 사용하여 애니메이션을 선언한다. 애니메이션 이전 css 속성을 지정하고 싶다면 fromTo() 를 사용하고, 이후 상태만 정의하고 싶다면 to()를 사용한다.
gsap.to 애니메이션에 활용된 속성을 살펴보자. x에는 "+=200"이 지정되어 있고, y에는 200이 지정되어 있다. +=200은 현재 위치를 기준으로 한 상대좌표이고, 200은 뷰포트 상의 절대 좌표이다.
gsap.to()의 마지막 인자로 ">2"이 들어가있다. 바로 직전에 추가된 gsap.fromTo()의 애니메이션 종료 후 2초 뒤에 해당 애니메이션이 실행된다는 의이다. ">2"를 받는 파라미터 이름을 'position parameter'라고 부른다.

position parameter에는 다음과 같이 다양한 값을 넣을 수. 있다.