강의

멘토링

로드맵

BEST
개발 · 프로그래밍

/

프론트엔드

웹 애니메이션을 위한 GSAP 가이드 Part.03

웹 애니메이션의 꽃, 스크롤 애니메이션! GSAP을 보다 강력하게 사용할 수 있는 ScrollTrigger에 대해 학습합니다.

(5.0) 수강평 16개

수강생 227명

  • 범쌤
실습 중심
gsap
웹페이지
스크롤이벤트
scrolltrigger인터랙티브 웹JavaScript애니메이션

먼저 경험한 수강생들의 후기

이런 걸 배울 수 있어요

  • GSAP 사용 방법

  • 스크롤 애니메이션의 이해

  • GSAP 활용

GSAP 애니메이션의 꽃, 스크롤트리거 
원리부터 응용까지 완벽 정리!

자바스크립트 애니메이션 라이브러리, GSAP

GreenSockAnimationPlatform(GSAP)을 보다 깊게 이해하고, 애니메이션을 체계적으로 구축하고 관리하는 방법에 대해 배워봅니다.

✅ GSAP을 더 잘 쓰고 싶다면!
더 다양한 코드와 애니메이션, 실습 자료까지!

GSAP 스크롤 애니메이션?
“별 거 아니네” 할 수 있게 해드릴게요!

“ScrollTrigger 대충은 써봤는데.. 어떻게 응용하는지 잘 모르겠어요 😥”

👉 걱정 마세요! 스크롤 애니메이션, ScrollTrigger 제대로 배울 수 있게 도와드릴게요!

GSAP을 어느 정도 사용해 봤는데, 더 깊게 이해하고 제대로 사용해보고 싶으신가요? 제대로 된 한글 문서나 가이드가 없어서 여전히 어렵게 느껴지시나요? GSAP은 기초 문법만으로도 여러 애니메이션을 넣을 수 있지만, 속성을 깊이 파고 들어가면 갈수록 더욱 더 다양한 애니메이션 핸들링을 할 수 있습니다.

이 강의는 지난 GSAP Part. 01 그리고 Part. 02에서 이어지는 Part. 03 강의입니다. 인터랙티브 웹에서 필수 요소인 스크롤 애니메이션을, GSAP 기능을 적극적으로 활용하면서 내 손으로 확실하게 익혀보세요!

이런 분들 주목하세요!

  • ScrollTrigger를 제대로 배우고 싶은 개발자
  • 스크롤 애니메이션이 궁금한 디자이너
  • 웹 애니메이션에 흥미를 가지고 있는 개발자 

여러분의 고민을 해결해드릴게요.

  • UI만 만들고 끝? 원리부터 제대로 이해하는 강의
  • 이론만 설명하고 끝나는 강의가 아닌 풍부한 설명과 실무에 바로 적용할 수 있는 코드 레벨
  • GSAP에서 필요로 하는 자바스크립트의 내용을 이해하며 보는 강의
  • 섹션별 내용을 연습해볼 수 있는 Practice 제공 
  • 파트1, 파트2에 연결되는 시리즈 강의 
ScrollTrigger 기본 문법과 애니메이션에 대해 학습합니다.
기본 이론을 바탕으로 하나의 웹페이지 애니메이션을 구성합니다.
인터랙티브 웹 필수 요소인 부드러운 스크롤 방식을 proxy(우회)해서 무료로 사용하는 방법에 대해 학습합니다.
디테일한 애니메이션 컨트롤을 위한 ScrollTrigger CallBack에 대해 학습합니다.
스크롤을 막고 애니메이션을 제어하는 방법을 학습합니다.
스크롤 진행에 맞춰 UI가 그려지는 애니메이션을 학습합니다.
스크롤에 따른 애니메이션 토글 방식에 대해 학습합니다.
배운 내용을 바탕으로 하나의 완성도 있는 웹사이트 애니메이션을 구현합니다.
스크롤값에 따라 비디오의 재생을 컨트롤할 수 있는 애니메이션에 대해 학습합니다.
텍스트 플러그인을 활용해 다이나믹한 글자 애니메이션을 만들고 반응형에 대해 관리하는 방법을 알아봅니다.
SVG를 플러그인과 함께 스크롤에 따라 그려지도록 컨트롤합니다.
인터랙티브 웹 필수 요소인 SPA(Single Page Application)의 작동 방식과 ScrollTrigger의 연결 방법을 학습합니다.
가로형 레이아웃의 구현 방법과 ScrollTrigger의 연동에 대해 학습합니다.
가로, 세로가 섞인 형태의 레이아웃의 구현 방법과 ScrollTrigger의 연동에 대해 학습합니다.
ViewPort마다 다르게 작동하는 애니메이션을 설정하는 방법을 익힙니다.
접근성을 높이고 사용자가 애니메이션을 끄고 켤 수 있는 환경을 제공하는 Reduced-motion에 대해 학습합니다.

강의를 듣고 나면 할 수 있어요!

  • ✅ 다른 사이트에서 보던 애니메이션들이 이런 식으로 작동하는구나~ 하고 알게 됩니다.
  • ✅ 어렵지 않게 만들고 싶은 애니메이션을 그대로 구현해가는 자신을 볼 수 있게 됩니다.
  • ✅ 섹션마다 배운 내용을 응용해 만들어 볼 수 있는 실습 자료가 준비되어 있어요!

Q&A 💬

Q. GSAP ScrollTrigger 를 배우면 어떤 일을 할 수 있나요? 

웹사이트에 스크롤이 필요한 모든 곳에 애니메이션을 자유롭게 적용시킬 수 있습니다.

Q. 강의를 듣기 전 준비해야 할 것이 있나요?

자바스크립트의 기본 지식과 파트 1, 파트 2 강의에 해당하는 수준의 사전 지식이 필요합니다.

Q. 수업 내용을 어느 수준까지 다루나요?

기능만 설명하고 끝나는 강의가 아닌, 코어를 이해하고 실무에 바로 사용할 수 있을 정도로 진행합니다.

💾 실습 환경 및 학습 자료 안내

  • Windows 및 macOS 환경에서 학습할 수 있습니다.
  • 강의에서는 Visual Studio Code를 사용합니다.
  • 선수 지식으로 지난 파트 1, 파트 2 강의 커리큘럼 수준의 이해 및 JavaScript에 대한 숙지가 필요합니다.
  • 수강생에게는 노션 문서 및 실습 파일을 제공합니다. 학습 자료는 강의를 수강하는 수강생들만 볼 수 있습니다.

GSAP이 처음이라면? 지난 강의 살펴보기

 
 

이런 분들께
추천드려요

학습 대상은
누구일까요?

  • GSAP을 배우고 싶은 개발자

  • 웹 애니메이션이 궁금한 디자이너

  • 스크롤 애니메이션이 궁금한 개발자

선수 지식,
필요할까요?

  • 웹 애니메이션을 위한 GSAP 가이드 파트 1

  • 웹 애니메이션을 위한 GSAP 가이드 파트 2

  • HTML/CSS

  • JavaScript

안녕하세요
입니다.

4,416

수강생

223

수강평

292

답변

4.9

강의 평점

5

강의

 

---안녕하세요 디자인과 개발에 재미를 가지고 강의를 만드는 범쌤입니다 🙂 -----------------------------------------------------온라인 / 오프라인 출강 문의는 seonbeom2@gmail.com 으로 연락주세요 🙇‍♂

 

커리큘럼

전체

55개 ∙ (13시간 20분)

해당 강의에서 제공:

수업자료
강의 게시일: 
마지막 업데이트일: 

수강평

전체

16개

5.0

16개의 수강평

  • taeyoongo007님의 프로필 이미지
    taeyoongo007

    수강평 4

    평균 평점 5.0

    5

    100% 수강 후 작성

    I listened to it and it was very useful and fun. I was thinking of making a portfolio to change jobs anyway, I plan to make a good portfolio site by utilizing gsap as much as possible. I plan to listen to the SVG lecture next time. Thank you. If you plan to give a React lecture later, I would appreciate it if you could show me how to use it by mixing it with Gsap.

    • bkman10046536님의 프로필 이미지
      bkman10046536

      수강평 3

      평균 평점 5.0

      5

      100% 수강 후 작성

      1-3 I completed them all! Honestly, I think you're a genius if you listen to them once and understand them all. ㅠㅠ But if you just kept on studying until the end, you'll be able to see the big picture of GSAP! I'm going to practice and utilize them by reading them in between whenever necessary in my work! The ignorant fear I had when I first encountered GSAP has largely disappeared, and I'm satisfied with myself for being able to handle it naturally. Thank you!!

      • twkim94님의 프로필 이미지
        twkim94

        수강평 3

        평균 평점 5.0

        5

        100% 수강 후 작성

        I completed Part 1 to Part 3. They were all full of useful content. There are really few lectures on scrollTrigger in Korea, but thanks to this, I was able to create the interactive portfolio I wanted and successfully transfer to the place I wanted! Thank you for uploading such a great lecture. I'm looking forward to the next Part 4!

        • gangsugi5753님의 프로필 이미지
          gangsugi5753

          수강평 23

          평균 평점 5.0

          5

          93% 수강 후 작성

          I listened to Part 1 and then immediately to Part 3, but the detailed explanations made it easy to complete the course. I only knew the general outline before, but through the lectures, I learned more details. The explanations were excellent, and I could really feel the effort put into creating the lectures. I enjoyed the lectures, and if Part 4 comes out, I will definitely listen to it.

          • kbba785883님의 프로필 이미지
            kbba785883

            수강평 32

            평균 평점 4.8

            5

            16% 수강 후 작성

            I was watching YouTube lectures in English to learn the functions of GSAP, and then I ended up listening to Mr. Beom's Part 1-Part 3 lectures. To sum it up, this is the final lecture on GSAP. You don't need to wander around anywhere else anymore. If GSAP releases a new function, this is the best lecture among the lectures that have been released so far. It's like scratching an itch in advance. Each lecture fills my head and I feel like I'm putting knowledge in my head. It's hard to explain it in words anymore~~

            2025 추석맞이 감사할인 중 (6일 남음)

            ₩91

            24%

            ₩156,200

            범쌤님의 다른 강의

            지식공유자님의 다른 강의를 만나보세요!

            비슷한 강의

            같은 분야의 다른 강의를 만나보세요!