GSAP란 무엇인가? -녹색 양말 만화 이음마당

GSAP란 무엇인가..?

 

 

 

Green Sock Animation Platform 한글로 번역하면

녹. 색. 양. 말. 만. 화. 이. 음. 마. 당!

이라고 한다.

 

(죄송합니다 바로 본론으로 들어가겠습니다.)

 

 

 

1.GSAP

 

GSAP(GreenSock Animation Platform)는

GSAP는 GrennSock에서 만든 자바스크립트 애니메이션 라이브러리이다.

웹 애니메이션을 만들 때 굉장히 유용한 자바스크립트 라이브러리.

DOM 요소에 복잡한 애니메이션 효과를 쉽게 추가할 수 있게 해 준다.

특히 성능이 뛰어나고, 다양한 브라우저에서 일관된 동작을 보장하기 때문에

웹 개발자들 사이에서 인기가 많다.

 

 

 

실제 공식 GSAP이미지

 

 

 

2. 왜 GSAP을 선택했을까?

1. 성능
   GSAP은 뛰어난 성능을 자랑한다. CSS 애니메이션이나 다른 자바스크립트 라이브러리와 비교했을 때 프레임 드랍이 적고, 매끄러운 애니메이션을 구현할 수 있다. 특히, 모바일 환경에서도 성능 저하 없이 잘 작동하기 때문에
2. 반응형 웹사이트나 모바일 앱에서도 많이 사용된다.
3. 다양한 애니메이션 기능
   기본적인 이동, 회전, 크기 변경부터 3D 애니메이션, 텍스트 애니메이션,
4. SVG 애니메이션까지 가능하다. 다양한 기능을 제공하기 때문에 여러 효과를 결합해 복잡한 애니메이션을 쉽게 구현할 수 있다.
5. Timeline 기능
   Timeline을 사용하면 여러 애니메이션을 시간순으로 관리할 수 있다. 여러 애니메이션이 동시에 또는 순차적으로 실행될 수 있도록 조정할 수 있기 때문에, 복잡한 애니메이션 흐름을 쉽게 제어할 수 있다.

 

 

3.GSAP의 주요 기능

• Tween: 특정 요소를 시간에 따라 애니메이션 시키는 기본 단위다. gsap.to(), gsap.from(), gsap.fromTo()와 같은 함수들을 사용해 다양한 트윈을 적용할 수 있다.

gsap.to(".box", { duration: 1, x: 100 });

내가 실제 웹제작에 사용한 코드형태이다.

 

 

 

 

• Timeline: 여러 애니메이션을 순차적으로 또는 동시에 제어할 수 있는 기능이다.
• 복잡한 애니메이션 시나리오를 만들 때 유용하다
  
  (이러한 기능도 있다는데 너무 복잡하고 사용하지 않을 거 같아서 예시코드만 올려놓겠다.)

const tl = gsap.timeline();
tl.to(".box", { duration: 1, x: 100 })
  .to(".box", { duration: 1, y: 50 })
  .to(".box", { duration: 1, rotation: 360 });

 

 

 

 

 

4. GSAP을 React 프로젝트에 적용하기

 

 

 

React와 GSAP을 함께 사용하는 방법도 매우 간단하다.

보통 useEffect 훅을 사용해 컴포넌트가 마운트 된 이후

애니메이션을 적용하는 방식으로 사용된다.

 

1. GSAP 설치 - GSAP은 npm을 통해 설치할 수 있다.

 

npm install gsap

 

 

 

2. 애니메이션 적용 useRef를 사용해서 애니메이션을 적용할 요소를 참조하고,

useEffect에서 GSAP 코드를 실행하면 된다.

 

import React, { useRef, useEffect } from "react";
import { gsap } from "gsap";

const AnimatedComponent = () => {
  const boxRef = useRef(null);

  useEffect(() => {
    gsap.to(boxRef.current, { duration: 1, x: 100, y: 50 });
  }, []);

  return <div ref={boxRef} className="box">Hello GSAP!</div>;
};

export default AnimatedComponent;

이런 식으로 적용하면 된다.

실제로 사용하기 쉬운 게
duration은 애니메이션의 속도(애니메이션이 끝나기까지의 시간)

X, Y는 이동할 장소이다.

 

 

내가 적용한 실제 코드를 조금만 작성해 보자면

 useEffect(() => {
    if (isVisible) {
      // 제목 애니메이션
      gsap.to(titleRef.current, {
        opacity: 1,
        y: 0,
        duration: 1,
        ease: "power3.out",
      });

      // 카드 애니메이션
      gsap.from(cardsRef.current, {
        opacity: 0,
        y: 100,
        stagger: 0.6,
        duration: 1,
        ease: "power3.out",
        delay: 0.5,
      });
    }
  }, [isVisible]);

  return (
    <Section ref={sectionRef}>
      <Title ref={titleRef}>사업영역</Title>

      <CardContainer>
        {businessAreas.map((area, index) => (
          <div key={index} ref={(el) => (cardsRef.current[index] = el)}>
            <BusinessCard {...area} />
          </div>
        ))}
      </CardContainer>
    </Section>
  );
};

이런 식으로 작성했다.
결과값은 사업영역의 4가지 카드들이 순서대로 위로 올라와 제자리를 찾아가는

형식의 애니메이션이다!

 

 

 

 

 

마무리

GSAP은 다양한 애니메이션 기능을 제공하는 강력한 라이브러리다.

특히 성능 면에서 뛰어나고,

복잡한 애니메이션을 쉽게 제어할 수 있어 프로젝트에 큰 도움이 된다.

실제로 처음 접한 라이브러리는 swipe 라이브러리였는데
코드를 잘 몰랐던 나한테 굉장한 효능감과 성취감을 가져다준 라이브러리였다!
이처럼 라이브러리는 참 좋은 거 같다!
(언젠가 라이브러리는 장점만 가지고 있을까? 에 대해 고찰해 봐야겠다)

 

더 생동감 있는 웹사이트를 만들고 싶다면 GSAP을 꼭 활용해 보길 추천해 본다!

 

 

(저는 GASP, GSAP 아직도 헷갈려서 코드작성할 때 여러 번 고쳐 썼습니다..)