BEST

개발 · 프로그래밍

프론트엔드

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

Name: 웹 애니메이션을 위한 GSAP 가이드 Part.03
Price: 156200 KRW

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

(5.0) 수강평 16개

수강생 210명

범쌤

scrolltrigger gsap 인터랙티브 웹 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 가이드 Part.01

범쌤

₩44,000

초급 / gsap, 인터랙티브 웹, JavaScript, HTML/CSS

5.0

(55)

600+

GSAP을 통해 인터랙티브 웹 개발에 한 단계 다가갈 수 있으며, 애니메이션을 보는 관점이 달라질 겁니다.

초급

gsap, 인터랙티브 웹, JavaScript

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

범쌤

₩156,200

초급 / gsap, 인터랙티브 웹, JavaScript, HTML/CSS

5.0

(26)

200+

“GSAP 이런 것까지 가능했어?” 애니메이션이 복잡하고 어렵다는 기존의 고정관념을 깨드립니다.

초급

gsap, 인터랙티브 웹, JavaScript

이런 분들께
추천드려요!

학습 대상은
누구일까요?

GSAP을 배우고 싶은 개발자
웹 애니메이션이 궁금한 디자이너
스크롤 애니메이션이 궁금한 개발자

선수 지식,
필요할까요?

웹 애니메이션을 위한 GSAP 가이드 파트 1
웹 애니메이션을 위한 GSAP 가이드 파트 2
HTML/CSS
JavaScript

안녕하세요
범쌤 입니다.

4,292

명

수강생

209

개

수강평

283

개

답변

4.9

점

강의 평점

개

강의

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

커리큘럼

전체

55개 ∙ (13시간 20분)

해당 강의에서 제공:

수업자료

섹션 1. Intro

3개 ∙ (28분)

섹션 2. Basic Trigger

12개 ∙ (2시간 41분)

4. 환경설정
08:37
5. Basic Trigger (1)
11:27
6. Basic Trigger (2)
09:59
7. Scrub (1)
15:50
8. Scrub (2)
20:44
9. Pin (1)
13:33
10. Pin (2)
11:18
11. Parallax (1)
13:00
12. Parallax (2)
10:33
13. Practice (1)
19:42
14. Practice (2)
10:52
15. Practice (3)
16:08

섹션 3. Advanced Trigger

16개 ∙ (3시간 55분)

16. Proxy (1)
16:38
17. Proxy (2)
13:43
18. Proxy (3)
19:42
19. Callback
19:55
20. PreventScroll
16:50
21. FastScrollEnd
19:13
22. Navigation Loop (1)
15:23
23. Navigation Loop (2)
12:36
24. Scroll Based Progress (1)
16:37
25. Scroll Based Progress (2)
16:14
26. Animation Toggle (1)
10:09
27. Animation Toggle (2)
09:39
28. Practice (1)
13:48
29. Practice (2)
13:00
30. Practice (3)
09:36
31. Practice (4)
12:30

섹션 4. Trigger with Plugin

12개 ∙ (3시간 16분)

섹션 5. Layout

8개 ∙ (2시간 9분)

섹션 6. Responsive & a11y

3개 ∙ (47분)

섹션 7. 마치며

1개 ∙ (2분)

강의 게시일: 2023. 10. 25.

마지막 업데이트일: 2025. 05. 13.

수강평

전체

16개

5.0

16개의 수강평

Taeyoon
수강평 4
∙
평균 평점 5.0
2024. 12. 17.
5
100% 수강 후 작성
너무 유익하고 재밌게 잘 들었습니다. 아무래도 이직하기 위해 슬슬 포트폴리오 만들 생각이였는데 최대한 gsap를 활용해서 좋은 포폴 사이트 만들 예정입니다. 다음에 svg 강의도 들을 예정입니다. 감사합니다. 추후에 리엑트 강의등 하실 계획 있으시면 Gsap도 함께 섞어서 어떻게 사용해서 보여주실 수있는지도 보여주시면 감사합니다.
한봉경
수강평 3
∙
평균 평점 5.0
2024. 11. 18.
5
100% 수강 후 작성
1-3 전부 완강했습니당! 솔직히 한번 듣고 다 이해한다면 천재라고 생각해요 ㅠㅠ 그래도 무작정 계속 끝까지 완강해보니 대략적인 GSAP의 큰그림을 볼 수 있었어요! 실무에서 필요할 때마다 중간중간 회독하면서 연습해보면서 활용해보려 합니다! 처음 gsap을 접했을 때 다가왔던 무지성 공포감은 많이 없어진 상태이고, 자연스럽게 만질 수 있는 제 자신이 만족스럽습니다 ㅎ 감사합니당!!
뽀로링
수강평 3
∙
평균 평점 5.0
2024. 08. 11.
5
100% 수강 후 작성
파트1 부터 파트3 까지 완강했습니다. 모두 알찬 내용들로만 가득했습니다. scrollTrigger 관련한 강의는 한국에 정말 몇 없는데, 덕분에 원하던 인터랙티브한 포트폴리오를 제작해 원하는 곳으로 이직 성공했습니다! 좋은 강의 올려주셔서 감사합니다. 다음 파트4도 기대가되네요!
gangsugi
수강평 20
∙
평균 평점 5.0
2025. 04. 21.
5
93% 수강 후 작성
part1을 듣고 바로 part3를 들었지만 자세한 설명으로 어렵지 않게 완강을 했습니다. 대략적인 부분만 알고 있었는데 강의를 들으면서 좀더 상세하게 알게 되었습니다. 설명도 너무 잘 하시고 강의 만드실때 정성이 많이 들어갔다는게 팍팍 느껴집니다. 좋은 강의 잘 들었구요, part4도 나오면 꼭 듣겠습니다^^
foxball
수강평 32
∙
평균 평점 4.8
2024. 11. 08.
5
16% 수강 후 작성
gsap의 기능들을 익혀보려고 영어로된 유튜브 강좌만 보다가 범쌤님의 파트1~파트3 강좌를 듣게되었습니다. 결론부터 말씀드리면 gsap 종결 강의 입니다. 더이상 다른곳에서 헤매실필요 없습니다. gsap 에서 새로운 기능이 나오면 모를까 현재까지 나온 강의중에 최고의 강의입니다. 간지러운곳을 미리 긁어주는 느낌이랄까요 강좌 하나하나가 머릿속을 꽉채우고 지식을 머리에 넣고있는 느낌입니다. 더이상 말로 설명드리기가 어렵네요~~

범쌤 님의 다른 강의

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

디자인 시스템 with 피그마

범쌤

₩44,000

초급 / Figma, Figma Tokens, 디자인 시스템, 아토믹 디자인, 프로덕트디자인

4.9

(68)

1,400+

이 강의를 통해 디자인 시스템을 구축하고 내 디자인 작업물이 가지는 폭발적인 시너지를 느껴보세요.

초급

Figma, Figma Tokens, 디자인 시스템

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

범쌤

₩156,200

초급 / gsap, 인터랙티브 웹, JavaScript, HTML/CSS

5.0

(26)

200+

“GSAP 이런 것까지 가능했어?” 애니메이션이 복잡하고 어렵다는 기존의 고정관념을 깨드립니다.

초급

gsap, 인터랙티브 웹, JavaScript

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

범쌤

₩44,000

초급 / gsap, 인터랙티브 웹, JavaScript, HTML/CSS

5.0

(55)

600+

GSAP을 통해 인터랙티브 웹 개발에 한 단계 다가갈 수 있으며, 애니메이션을 보는 관점이 달라질 겁니다.

초급

gsap, 인터랙티브 웹, JavaScript

비슷한 강의

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

SCSS(SASS)+FLEX 실전 반응형 웹 프로젝트 with Figma

코딩웍스(Coding Works)

₩119,900

초급 / HTML/CSS, Sass, scss, JavaScript, jQuery

4.9

(21)

300+

답변 활발

SCSS(SASS)와 FLEX Layout을 실전에 완벽하게 활용합니다! 피그마로 전체 웹사이트의 메인 페이지 및 핵심 서브 페이지 UI를 디자인하고, 일관성 있는 클래스네임과 함께 HTML 와이어프레임 구조를 만들어 퍼블리싱까지 완료하는 체계적인 반응형 웹 사이트 프로젝트 제작 과정입니다. 총 41시간 이상의 과정 속에서 핵심 이론 및 실무 활용 능력을 충분히 익히고, PC - 모바일 - 태블릿 대응 반응형 레이아웃을 설계 및 제작하면서 반응형 웹 프로젝트에 대한 경험과 노하우는 물론 제이쿼리(jQuery) 핵심 이론 및 실무 활용 능력까지 대폭 향상시키게 됩니다.

초급

HTML/CSS, Sass, scss

당신의 창의적인 웹을 만들어보세요: Parallax ScrollTrigger 마스터 클래스

webstoryboy

₩44,000

초급 / gsap, parallax, scrolltrigger, 포트폴리오, JavaScript

5.0

(3)

다양한 웹 사이트에서 Parallax ScrollTrigger를 사용하여 멋진 효과를 구현하고 있습니다. 우리도 이 라이브러리를 사용하여 창의적이고 인상적인 웹 페이지를 만들어 봅시다.

초급

gsap, parallax, scrolltrigger

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

범쌤

₩156,200

초급 / gsap, 인터랙티브 웹, JavaScript, HTML/CSS

5.0

(26)

200+

“GSAP 이런 것까지 가능했어?” 애니메이션이 복잡하고 어렵다는 기존의 고정관념을 깨드립니다.

초급

gsap, 인터랙티브 웹, JavaScript

웹 애니메이션의 새로운 표준, Web Animations API

1분코딩

₩66,000

초급 / Web Animations API, JavaScript, HTML/CSS, 인터랙티브 웹, frontend

5.0

(38)

800+

라이브러리는 선택이지만, 웹 표준 기술은 필수입니다. 웹 애니메이션의 새로운 표준인 Web Animation API에 남들보다 빠르게 적응하고, 실무에도 바로 활용해보세요!

초급

Web Animations API, JavaScript, HTML/CSS

실전! 웹사이트제작! Step by Step! (한국소비자원 소비자시대- 레이아웃제작 기초)

J.영

₩11,000

초급 / HTML/CSS, jQuery, 인터랙티브 웹, 클론코딩

4.9

(32)

600+

Update

[웹사이트제작 Step By Step] 초급 강좌로, 한국소비자시대 웹진(현재는 리뉴얼 됨) 메인페이지를 그대로 제작해 보는 과정입니다.

초급

HTML/CSS, jQuery, 인터랙티브 웹

문법 공부 다음엔, 자바스크립트 프로젝트 101

이룸코딩

₩55,000

초급 / JavaScript

4.8

(8)

100+

🚀 자바스크립트 문법 공부를 막 끝낸 코린이들에게 적합한 미니 프로젝트 실습 강의입니다. 자바스크립트 기초 문법과 리액트나 뷰 등의 프레임워크 사이에 꽉 막힌 구간을 시원하게 뚫어드립니다. ✨

초급

JavaScript

핵심만 골라배우는 JavaScript

수코딩

₩79,200

입문 / JavaScript

5.0

(2)

프론트엔드 입문자들은 필수적으로 익혀야하는 Javascript 문법! 기초부터 시작해서 고급에 이르기까지 javaScript 언어를 샅샅히 파헤쳐봅니다!

입문

JavaScript

클린업 JavaScript: 점프업!

김영보

₩44,000

초급 / JavaScript

자바스크립트 최종 코스! ES2025 기준 실행 콘텍스트 구조와 방법, Event Loop, 멀티 스레딩을 다룹니다. 자바스크립트 언어에 담겨진 언어 문화를 다룹니다.

초급

JavaScript

웹게임을 만들며 배우는 인터렉티브웹! JAVASCRIPT

깡코딩

₩88,000

초급 / 인터랙티브 웹, JavaScript, HTML/CSS

4.8

(22)

300+

웹게임도 만들고, 프론트엔드 웹 개발 스킬도 배우는 1석 3조 수업! 독자적인 아이디어로 JavaScript, CSS, HTML을 활용해 게임을 만들 수 있는 방법을 수업으로 만들었습니다!

초급

인터랙티브 웹, JavaScript, HTML/CSS

모바일, 태블릿, pc 반응형 인스타그램 클론코딩

더코딩클럽

₩29,700

초급 / HTML/CSS, JavaScript, 클론코딩

5.0

(1)

이 강의를 통해 수강생은 HTML, CSS, JS로 인스타그램과 비슷한 웹서비스를 만들 수있습니다. ( 프론트만 구현했습니다! 백엔드 서버 구축은 차후 강의 촬영 예정입니다.)

초급

HTML/CSS, JavaScript, 클론코딩

풀스택을 위한 탄탄한 프런트엔드 부트캠프 (HTML, CSS, 바닐라 자바스크립트 + ES6) [풀스택 Part2]

잔재미코딩 DaveLee

₩82,500

24%

₩61,880

입문 / HTML/CSS, JavaScript, ES6

4.9

(165)

2,600+

Update

현업에서 실제 웹서비스를 개발한 경험을 기반으로, 입문자를 위한 실제 상용화도 가능한 수준의 웹과 앱서비스를 개발하는 것을 목표로 하는 풀스택 시리즈 강의입니다. 이를 위한 Part2 강의로 다양한 기술이 존재하는 프런트엔드 기술에서 반응형, 호환성까지 고려한 최신 HTML5, CSS3, 바닐라 자바스크립트 (Javascript) + ES6 를 모두 견고하게 싹 정리하는 강의입니다.

입문

HTML/CSS, JavaScript, ES6

웹디자인기능사 자격증 대비(2023년 출제기준 반영버전)

webstoryboy

₩44,000

초급 / HTML/CSS, jQuery, JavaScript, 웹 디자인

웹디자인기능사 출제기준 2023년 버전에 맞추어 누구나 합격할 수 있도록 제작하였습니다. 5가지 유형을 배우고 빠르게 합격합시다!

초급

HTML/CSS, jQuery, JavaScript

시험 전에 꼭 봐야 할 웹디자인기능사 공개 문제 (2020) Part.1

유용한IT학습

₩20,900

초급 / HTML/CSS, JavaScript

4.8

(8)

33,600+

웹디자인기능사 실기를 준비하기 위한 기초 내용을 공개 문제를 통해 학습하는 강의입니다. 실무에서 웹 코딩을 활용하고자 하는 웹디자이너에게도 유익한 강의에요.

초급

HTML/CSS, JavaScript

비전공자를 위한 풀스택 맛집지도 만들기 프로젝트!: Front, Back-end 그리고 배포까지

Jiwoon Jeong

₩77,000

초급 / HTML/CSS, JavaScript, REST API, MySQL, AWS, Git, GitHub

4.8

(35)

600+

내가 좋아하는 유튜버의 맛집지도를 만들면서 프론트엔드, 백엔드, 카카오맵 API 사용법, 배포까지 한번에 배울 수 있는 풀스택 맛집지도 강의입니다.

초급

HTML/CSS, JavaScript, REST API

클린업 JavaScript: 베이스 빌드업!

김영보

₩44,000

초급 / JavaScript, 면접, 기술면접

5.0

(3)

100+

Update

생각을 다룹니다. 자바스크립트 핵심과 근본을 논리적으로 정리할 수 있습니다. 자바스크립트 경험, 생각을 스스로 정리할 수 있습니다. 자바스크립트 기술 논리를 정립할 수 있습니다. 자바스크립트 전체를 보는 시야를 넓힐 수 있습니다. 자바스크립트 기술 면접 문제에 대비할 수 있습니다.

초급

JavaScript, 면접, 기술면접

mongoDB 기초부터 실무까지(feat. Node.js)

김시훈 (도도소프트)

₩77,000

초급 / MongoDB, REST API, Node.js, AWS, JavaScript, DBMS/RDBMS, 데이터 엔지니어링

4.7

(86)

1,300+

mongoDB, NoSQL 요즘 많이 들리지만 아직은 낯선 데이터베이스인가요? 관계형 데이터베이스(RDS/SQL)처럼 사용하고 계시지는 않으신가요? 아무리 좋은 기술도 올바르게 사용하지 않으면 역효과가 발생합니다. 그래서 몽고디비 사용 실패 사례도 종종 보이는데요. 이 강의는 mongoDB를 최대한 mongoDB스럽게 사용할 수 있도록 기본 개념부터 실무 노하우까지 가르쳐드려요.

초급

MongoDB, REST API, Node.js