GSAP 실전 활용 예시 간단 정리03

Posted Apr 23, 2024

By Jinwoo 18 min read

안녕하세요. 오늘은 필자가 GSAP를 사용하여 만들어본 코드들을 간단하게 설명한 글입니다.

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

아래의 코드는 HTML, CSS 및 JavaScript를 사용하여 구현된 Parallax Effect에 관한 페이지입니다. 아래는 해당 코드의 각 섹션에 대한 설명입니다.

1. CSS 스타일

CSS 파일은 HTML 요소들의 스타일을 정의합니다. 주요 스타일은 다음과 같습니다.

  
.main__inner {
    /* 공백 */
}

.main__inner section {
    width: 100%;
    height: 100vh;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

/* 각 섹션별로 배경색 지정 */
#section02,
#section04,
#section06,
#section08 {
    background-color: #00000016;
}

.main__inner section .num {
    position: absolute;
    right: 20px;
    bottom: 20px;
    color: #111;
    font-family: 'Bai Jamjuree';
    font-size: 30px;
    font-weight: 200;
}

.main__inner section .img {
    width: 200px;
    height: 200px;
    background-image: url(assets/img/img01.jpg);
    background-size: cover;
    filter: grayscale();
    margin: 5px;
}

.main__inner section .img.active {
    background-image: url(assets/img/img02.jpg);
}

/* 섹션 05, 06, 08에 대한 텍스트 스타일 지정 */
#section05 .text,
#section06 .text {
    font-family: 'Bai Jamjuree';
    text-transform: uppercase;
    font-size: 5vw;
    font-weight: 800;
    line-height: 1;
    color: #000;
}

/* 섹션 07 텍스트 스타일 지정 */
#section07 .text {
    width: 100%;
    font-size: 5vw;
    font-family: 'Bai Jamjuree';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    background-color: #BFCABD;
}

/* 섹션 08에 대한 스타일 지정 */
#section08 {
    flex-direction: column;
}

#section08 .text {
    font-size: 2vw;
    line-height: 1.5;
    text-transform: uppercase;
}

#section08 .img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
}

배치 및 레이아웃: flexbox를 사용하여 요소들을 가운데 정렬하고 섹션의 배경색을 설정합니다.
텍스트 및 이미지 스타일링: 폰트, 텍스트 크기, 색상 등의 텍스트 스타일을 지정하고 이미지의 크기 및 배경 이미지를 설정합니다.
애니메이션 관련 스타일: 각 섹션에 적용되는 애니메이션에 관련된 스타일을 지정합니다.

2. HTML 구조

HTML 파일은 웹 페이지의 구조를 정의하고 각 요소에 고유한 ID와 클래스를 할당하여 CSS 및 JavaScript에서 이를 참조할 수 있도록 했습니다. 주요 구조는 다음과 같습니다.

  
<div class="main__inner">
    <section id="section01">
        <span class="num">01</span>
        <div class="img"></div>
    </section>
    <!-- //section01 -->

    <section id="section02">
        <span class="num">02</span>
        <div class="img i1"></div>
        <div class="img i2"></div>
        <div class="img i3"></div>
        <div class="img i4"></div>
    </section>
    <!-- //section02 -->

    <section id="section03">
        <span class="num">03</span>
        <div class="img"></div>
        <div class="img"></div>
        <div class="img"></div>
        <div class="img"></div>
        <div class="img"></div>
        <div class="img"></div>
        <div class="img"></div>
    </section>
    <!-- //section03 -->

    <section id="section04">
        <span class="num">04</span>
        <div class="img"></div>
    </section>
    <!-- //section04 -->

    <section id="section05">
        <span class="num">05</span>
        <div class="text t1">section5</div>
        <div class="text t2">section5</div>
        <div class="text t3">section5</div>
        <div class="text t4">section5</div>
    </section>
    <!-- //section05 -->

    <section id="section06">
        <span class="num">06</span>
        <div class="text">section6</div>
    </section>
    <!-- //section06 -->

    <section id="section07">
        <span class="num">07</span>
        <div class="text t1">코딩이란..</div>
        <div class="text t2">집</div>
        <div class="text t3">가</div>
        <div class="text t4">고</div>
        <div class="text t5">싶</div>
        <div class="text t6">다</div>
    </section>
    <!-- //section07 -->

    <section id="section08">
        <span class="num">08</span>
        <div class="text t1">section8</div>
        <div class="text t2">section8</div>
        <div class="text t3">section8</div>
        <div class="img"></div>
    </section>
    <!-- //section08 -->

    <section id="section09">
        <span class="num">09</span>
        <div class="img"></div>
    </section>
    <!-- //section09 -->
</div>

.main__inner: 주요 콘텐츠 영역의 내부 컨테이너로, 각 섹션을 포함합니다.
- <section>: 각 섹션을 정의합니다. 각 섹션에는 고유한 ID(#section01, #section02 등)가 부여됩니다.
- .num: 섹션 내에 순서를 나타내는 번호입니다.
- .img: 이미지를 표시하는 요소입니다.
- .text: 텍스트를 표시하는 요소입니다.

3. JavaScript (GSAP 및 ScrollTrigger)

JavaScript 파일은 GSAP(GreenSock Animation Platform) 및 ScrollTrigger 라이브러리를 사용하여 각 섹션에 애니메이션을 적용하고 스크롤 효과를 제어합니다.

  
<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/ScrollTrigger.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/ScrollToPlugin.min.js"></script>

// 섹션을 분리하여 각 섹션별 정리하였습니다.

위 코드의 GSAP (GreenSock Animation Platform)는 라이브러리의 스크립트를 HTML 문서에 추가하는 코드입니다. GSAP은 JavaScript로 강력한 애니메이션을 만들 수 있게 해주는 라이브러리이며, 웹 페이지의 요소들을 애니메이션화하고 상호작용 효과를 부여하는 데 사용됩니다.

여기서 사용된 각 스크립트 파일에 대한 설명은 다음과 같습니다:

gsap.min.js
- GSAP의 핵심 라이브러리 파일입니다.
- 이 파일은 모든 GSAP 애니메이션 기능을 포함하고 있습니다.
- gsap.timeline(), to(), from(), fromTo() 등의 애니메이션 메서드를 사용할 수 있습니다.
ScrollTrigger.min.js
- GSAP의 ScrollTrigger 플러그인 파일입니다.
- 이 파일은 스크롤 이벤트를 트리거로 사용하여 애니메이션을 제어할 수 있게 해줍니다.
- ScrollTrigger.create(), start, end, scrub, pin, anticipatePin 등의 스크롤 관련 옵션을 제공합니다.
ScrollToPlugin.min.js
- GSAP의 ScrollToPlugin 플러그인 파일입니다.
- 이 파일은 스크롤을 특정 요소나 위치로 스크롤링할 때 사용됩니다.
- gsap.to(window, { scrollTo: "#targetElement" })과 같은 방식으로 사용할 수 있습니다.

이 스크립트 파일들을 HTML 문서의 <head> 또는 <body> 부분에 추가하면 GSAP 라이브러리를 사용하여 웹 페이지의 요소들을 동적으로 애니메이션화할 수 있습니다. GSAP의 ScrollTrigger를 활용하면 스크롤 이벤트를 감지하고, ScrollToPlugin을 활용하면 특정 요소로 자연스럽게 스크롤될 수 있습니다.

각 섹션별로 적용된 JavaScript 코드는 GSAP (GreenSock Animation Platform) 및 ScrollTrigger 라이브러리를 사용하여 스크롤에 따라 다양한 애니메이션 효과를 제어하고 있습니다. 아래에서 각 섹션에 적용된 코드와 그 효과에 대해 자세히 설명하겠습니다.

섹션 1 (`#section01`)

  
const ani1 = gsap.timeline();

ani1.to("#section01 .img", { rotation: 720, scale: 0, borderRadius: 200 })
    .to("#section01 .img", { rotation: 0, scale: 1, borderRadius: 200 });

ScrollTrigger.create({
    animation: ani1,
    trigger: "#section01",
    start: "top top",
    end: "+=2000",
    scrub: true,
    pin: true,
    anticipatePin: 1,
});

효과: #section01의 이미지 요소가 회전하고 크기가 변하며, borderRadius 속성이 변경됩니다.
ScrollTrigger 설정: 스크롤 위치가 #section01에 도달하면 애니메이션이 트리거됩니다. 스크롤 위치에 따라 애니메이션이 부드럽게 실행되고, 섹션을 고정(pin)하고 스크롤 이벤트를 예측(anticipatePin)합니다.

섹션 2 (`#section02`)

  
const ani2 = gsap.timeline();

ani2.from("#section02 .i1", { y: -100, autoAlpha: 0, borderRadius: 200 }, "a")
    .from("#section02 .i2", { y: 100, autoAlpha: 0, borderRadius: 200 }, "+=2")
    .from("#section02 .i3", { y: -100, autoAlpha: 0, borderRadius: 200 }, "b")
    .from("#section02 .i4", { y: 100, autoAlpha: 0, borderRadius: 200 }, "+=2");

ScrollTrigger.create({
    animation: ani2,
    trigger: "#section02",
    start: "top top",
    end: "+=2000",
    scrub: true,
    pin: true,
    anticipatePin: 1,
});

효과: #section02의 이미지 요소들이 순차적으로 나타나며, 각 이미지의 위치와 투명도가 변경됩니다.
ScrollTrigger 설정: 스크롤 위치가 #section02에 도달하면 이미지들이 순차적으로 나타나는 애니메이션이 트리거됩니다.

섹션 3 (`#section03`)

  
const ani3 = gsap.timeline();

ani3.from("#section03 .img", {
    y: -100,
    autoAlpha: 0,
    borderRadius: 200,
    scale: 0.5,
    ease: "power4.out",
    stagger: {
        amount: 3,
        from: "random"
    }
});

ScrollTrigger.create({
    animation: ani3,
    trigger: "#section03",
    start: "top top",
    end: "+=3000",
    scrub: true,
    pin: true,
    anticipatePin: 1,
});

효과: #section03의 이미지 요소들이 랜덤하게 나타나며, 위치, 투명도, 크기 등이 변경됩니다.
ScrollTrigger 설정: 스크롤 위치가 #section03에 도달하면 이미지들이 랜덤하게 나타나는 애니메이션이 트리거됩니다.

섹션 4 (`#section04`)

  
const ani4 = gsap.timeline();

ani4.from("#section04 .img", {
    autoAlpha: 0,
    scale: 5,
    width: "100vw",
    height: "100vh",
});

ScrollTrigger.create({
    animation: ani4,
    trigger: "#section04",
    start: "top top",
    end: "+=3000",
    scrub: true,
    pin: true,
    anticipatePin: 1,
});

효과: #section04의 이미지 요소가 확대되면서 나타납니다.
ScrollTrigger 설정: 스크롤 위치가 #section04에 도달하면 이미지가 확대되면서 나타나는 애니메이션이 트리거됩니다.

섹션 5 (`#section05`)

  
const ani5 = gsap.timeline();
ani5.to("#section05 .t1", { xPercent: 300 }, "b")
    .to("#section05 .t2", { xPercent: -300 }, "b")
    .to("#section05 .t3", { xPercent: 300 }, "b")
    .to("#section05 .t4", { xPercent: -300 }, "b");

ScrollTrigger.create({
    animation: ani5,
    trigger: "#section05",
    start: "top top",
    end: "+=3000",
    scrub: true,
    pin: true,
    anticipatePin: 1,
});

효과: #section05의 텍스트 요소들이 수평으로 이동하면서 나타납니다.
ScrollTrigger 설정: 스크롤 위치가 #section05에 도달하면 텍스트 요소들이 수평 이동하는 애니메이션이 트리거됩니다.

섹션 6 (`#section06`)

  
const ani6 = gsap.timeline();
ani6.to("#section06 .text", { rotation: 100, scale: 60, duration: 2, x: 200, y: 2000 })
    .to("#section06 .text", { autoAlpha: 0 });

ScrollTrigger.create({
    animation: ani6,
    trigger: "#section06",
    start: "top top",
    end: "+=3000",
    scrub: true,
    pin: true,
    anticipatePin: 1,
});

효과: #section06의 텍스트 요소가 회전하고 크기가 커지면서 움직입니다.
ScrollTrigger 설정: 스크롤 위치가 #section06에 도달하면 텍스트 요소가 특정 애니메이션을 수행하고 사라집니다.

섹션 7 (`#section07`)

  
const ani7 = gsap.timeline();

ani7.from("#section07 .t1", { autoAlpha: 0, duration: 1, y: 50 }, "+=1")
    .from("#section07 .t2", { autoAlpha: 0, duration: 1, y: 50 }, "+=1")
    .from("#section07 .t3", { autoAlpha: 0, duration: 1, y: 50 }, "+=1")
    .from("#section07 .t4", { autoAlpha: 0, duration: 1, y: 50 }, "+=1")
    .from("#section07 .t5", { autoAlpha: 0, duration: 1, y: 50 }, "+=1")
    .from("#section07 .t6", { autoAlpha: 0, duration: 1, y: 50 }, "+=1");

ScrollTrigger.create({
    animation: ani7,
    trigger: "#section07",
    start: "top top",
    end: "+=6000",
    scrub: true,
    pin: true,
    anticipatePin: 1,
});

효과: #section07의 텍스트 요소들이 순차적으로 나타나며, 위치와 투명도가 변경됩니다.
ScrollTrigger 설정: 스크롤 위치가 #section07에 도달하면 텍스트 요소들이 순차적으로 나타나는 애니메이션이 트리거됩니다.

섹션 8 (`#section08`)

  
const ani8 = gsap.timeline();

ani8.from("#section08 .t1", { x: innerWidth * 1 })
    .from("#section08 .t2", { x: innerWidth * -1 })
    .from("#section08 .t3", { x: innerWidth * 1 })
    .from("#section08 .img", { x: innerWidth * -1 });

ScrollTrigger.create({
    animation: ani8,
    trigger: "#section08",
    start: "top top",
    end: "+=6000",
    scrub: true,
    pin: true,
    anticipatePin: 1,
});

효과: #section08의 텍스트와 이미지 요소들이 화면 내에서 움직입니다.
ScrollTrigger 설정: 스크롤 위치가 #section08에 도달하면 텍스트와 이미지 요소들이 화면 내에서 움직이는 애니메이션이 트리거됩니다.

섹션 9 (`#section09`)

  
const ani9 = gsap.timeline();

ani9.from("#section09 .img", {
    opacity: 0,
    y: 100,
    scale: 0.2,
    rotate: 180,
    stagger: 0.2,
    ease: "elastic.out(1, 0.5)"
});

ScrollTrigger.create({
    animation: ani9,
    trigger: "#section09",
    start: "top top",
    end: "+=1000",
    scrub: true,
    pin: true,
    anticipatePin: 1,
});

효과: #section09의 이미지 요소들이 탄성 효과와 함께 나타나며, 스태거링 효과로 각각 다르게 애니메이션됩니다.
ScrollTrigger 설정: 스크롤 위치가 #section09에 도달하면 이미지 요소들이 나타나는 애니메이션이 트리거됩니다.

이렇게 각 섹션별로 다양한 JavaScript 애니메이션 코드가 적용되어 있어, 스크롤에 따라 동적인 효과를 만들어내고 있습니다. ScrollTrigger를 통해 스크롤 위치를 감지하고, GSAP을 사용하여 요소들을 애니메이션화하여 웹 페이지를 보다 흥미롭게 만들 수 있습니다.

상호 작용

각 섹션(#section01, #section02 등)에 대한 ScrollTrigger가 설정되어 있습니다. 이는 스크롤 위치에 따라 해당 섹션의 애니메이션이 활성화되고 해제됩니다.
스크롤 위치에 따라 이미지가 회전하거나 이동하는 등의 애니메이션이 작동합니다.
텍스트가 확대되거나 이동하는 등의 동적인 효과가 적용됩니다.
ScrollTrigger를 사용하여 스크롤 이벤트에 따라 각 애니메이션이 적절하게 트리거되고 애니메이션의 시작과 끝을 제어합니다.

이렇게 HTML, CSS 및 JavaScript가 상호 작용하여 웹 페이지에 다양한 효과와 동적인 요소를 제공하고 있습니다. GSAP 및 ScrollTrigger를 통해 스크롤 애니메이션을 쉽게 구현할 수 있고, 각 요소의 스타일과 동작을 세밀하게 제어할 수 있습니다.

이렇게 코드에 대한 해석을 바탕으로 한 글을 작성해 봤습니다. GSAP를 이용해 애니메이션을 구축하는데 도움이 됐으면 합니다. 오늘도 필자의 부족한 글 읽어주셔서 감사합니다.

coding

javascript gsap 효과 애니메이션

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

1. CSS 스타일

2. HTML 구조

3. JavaScript (GSAP 및 ScrollTrigger)

섹션 1 (#section01)

섹션 2 (#section02)

섹션 3 (#section03)

섹션 4 (#section04)

섹션 5 (#section05)

섹션 6 (#section06)

섹션 7 (#section07)

섹션 8 (#section08)

섹션 9 (#section09)