GSAP에 대해

Posted Apr 18, 2024 Updated Apr 22, 2024

By Jinwoo 9 min read

안녕하세요. 오늘은 필자가 GSAP를 처음 사용해봐서 GSAP에 대해 정리한 글입니다

포스팅에 앞서 필자도 부족한 부분이 많으니 양해 부탁드립니다.

GSAP란?

GSAP(GreenSock Animation Platform)은 HTML, CSS 및 JavaScript를 사용하여 웹 애니메이션을 구현하기 위한 강력한 라이브러리입니다. GSAP은 애니메이션을 제어하고 관리하기 위한 다양한 기능과 직관적인 API를 제공하여 웹 개발자들이 복잡한 애니메이션을 쉽게 구현할 수 있도록 도와줍니다.

GSAP의 주요 기능과 이점

간단하고 직관적인 구문: GSAP은 간단하고 직관적인 구문을 제공하여 복잡한 애니메이션을 쉽게 작성할 수 있습니다. TweenMax, TimelineMax 등의 모듈을 사용하여 다양한 애니메이션 효과를 적용할 수 있습니다.
브라우저 호환성: GSAP은 모든 주요 브라우저에서 작동하며, 네이티브 CSS 속성을 활용하여 애니메이션을 구현합니다. 플래시 플러그인과 같은 추가 요소 없이도 쉽게 사용할 수 있습니다.
풍부한 애니메이션 기능: GSAP은 다양한 애니메이션 유형을 지원하고, 텍스트, SVG, 캔버스 등 다양한 요소에 애니메이션을 적용할 수 있습니다. 이동, 회전, 크기 조절, 투명도 변경 등 다양한 속성을 애니메이트할 수 있습니다.
뛰어난 성능과 최적화: GSAP은 웹 애니메이션의 부드러운 실행과 최적화된 성능을 제공하여 사용자 경험을 향상시킵니다. GPU 가속을 통해 고성능 애니메이션을 구현할 수 있습니다.

최근 GSAP 업데이트 내용 (2022년 1월 이후 기준)

GSAP은 지속적으로 업데이트되며, 최근 업데이트 중 일부 주요 변경 사항은 다음과 같습니다:

GSAP 3: GSAP 3 버전에서는 성능과 유연성이 향상되었습니다. 애니메이션 동작이 더 부드럽고 자연스러워졌으며, 자바스크립트 모듈 시스템과의 통합이 개선되었습니다.
모션 경로 애니메이션: GSAP 3에서는 SVG나 DOM 요소의 모션 경로를 따라 애니메이션을 만들 수 있는 기능이 추가되었습니다.
SplitText 플러그인: 텍스트를 문자 또는 단어로 분리하여 개별적으로 애니메이션을 적용할 수 있는 SplitText 플러그인이 도입되었습니다.
PixiJS 통합: GSAP과 PixiJS를 통합하여 Canvas 기반의 고성능 애니메이션을 더욱 쉽게 구현할 수 있게 되었습니다.
스크롤 트리거 애니메이션: ScrollTrigger 플러그인이 도입되어 스크롤 위치에 따라 애니메이션을 트리거할 수 있게 되었습니다.

GSAP와 ScrollTrigger를 함께 사용하기

GSAP와 ScrollTrigger를 함께 사용하면 스크롤 이벤트에 따라 동적인 애니메이션을 쉽게 추가할 수 있습니다. ScrollTrigger를 사용하여 스크롤 위치에 따라 애니메이션을 트리거하고, GSAP을 사용하여 애니메이션을 정의하고 제어할 수 있습니다. 이를 통해 사용자에게 멋진 인터랙티브 웹 경험을 제공할 수 있습니다.

이제 GSAP를 활용한 예쩨를 보여드리겠습니다.

GSAP 및 ScrollTrigger를 사용한 애니메이션 예제

이 예제는 세 개의 섹션을 가진 웹 페이지에서 각 섹션의 요소들이 스크롤에 따라 나타나는 애니메이션을 구현하는 방법을 보여줍니다.

HTML 구조

  
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>GSAP & ScrollTrigger Example</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="section" id="section1">
        <h1 class="title">Section 1</h1>
        <p>This is the content of section 1.</p>
    </div>
    <div class="section" id="section2">
        <h1 class="title">Section 2</h1>
        <p>This is the content of section 2.</p>
    </div>
    <div class="section" id="section3">
        <h1 class="title">Section 3</h1>
        <p>This is the content of section 3.</p>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/ScrollTrigger.min.js"></script>
    <script src="scripts.js"></script>
</body>
</html>

CSS 스타일 (styles.css)

  
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}

.section {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f0f0f0;
    text-align: center;
    opacity: 0; /* 초기에는 숨김 */
}

.title {
    font-size: 3em;
    color: #333;
    opacity: 0;
}

JavaScript 애니메이션 설정 (scripts.js)

  
// GSAP 플러그인 및 기능 불러오기
const { gsap } = window;
const { ScrollTrigger } = window;

// 각 섹션의 제목 요소에 fadeIn 애니메이션 및 ScrollTrigger 트리거 설정
gsap.utils.toArray('.section').forEach(section => {
    const title = section.querySelector('.title');
    const content = section.querySelector('p');

    gsap.from(title, {
        opacity: 0,
        y: 50,
        duration: 1,
        scrollTrigger: {
            trigger: section,
            start: 'top 80%', // 스크롤 위치
            toggleActions: 'play none none reverse' // 트리거 액션 설정
        }
    });

    gsap.from(content, {
        opacity: 0,
        y: 50,
        duration: 1,
        scrollTrigger: {
            trigger: section,
            start: 'top 80%', // 스크롤 위치
            toggleActions: 'play none none reverse' // 트리거 액션 설정
        }
    });
});

// 전체 섹션의 fadeIn 효과 설정
gsap.to('.section', {
    opacity: 1,
    duration: 1,
    scrollTrigger: {
        trigger: '.section:first-child',
        start: 'top 80%', // 스크롤 위치
        toggleActions: 'play none none reverse' // 트리거 액션 설정
    }
});

설명

JavaScript 애니메이션 설정:
- 각 섹션(.section) 요소의 제목(.title)과 내용(p)에 대한 fadeIn 애니메이션을 설정합니다.
- gsap.from()을 사용하여 요소들의 초기 상태를 정의하고, ScrollTrigger를 통해 스크롤 위치에 따라 애니메이션을 트리거합니다.
- 전체 섹션에 대한 fadeIn 효과를 적용하여 페이지가 로드될 때 전체 섹션들이 순차적으로 나타나도록 합니다.

이 예제는 각 섹션의 제목과 내용이 스크롤에 따라 부드럽게 나타나는 애니메이션을 구현합니다. ScrollTrigger를 사용하여 트리거 위치를 조정하고, GSAP을 활용하여 애니메이션을 쉽게 제어할 수 있습니다.

GSAP과 ScrollTrigger의 더 많은 기능과 사용법은 공식 문서(https://greensock.com/docs/)를 참조하시기 바랍니다. 이를 통해 웹 애니메이션을 효과적으로 구현하고 사용자 경험을 향상시킬 수 있습니다.

오늘도 필자의 부족한 글 읽어주셔서 감사합니다.

coding

This post is licensed under CC BY 4.0 by the author.