BEST

프론트엔드

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

Name: 웹 애니메이션을 위한 GSAP 가이드 Part.02
Price: 156200 KRW
Rating: 5 (32 reviews)

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

(5.0) 수강평 32개

수강생 291명

난이도 초급

수강기한 무제한

범쌤

gsap

프론트엔드

인터랙티브웹

html/css

프론트엔드

인터랙티브웹

html/css

인터랙티브 웹

JavaScript

HTML/CSS

GS리테일

임직원들도 이 강의를 듣고 있어요!

GS리테일

임직원들도 이 강의를 듣고 있어요!

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

5.0

김형진

100% 수강 후 작성

수강 완료했습니다!! 😆 저번 기초 파트에 이어서 gsap에 대해 좀 더 깊이 있게 다뤄서 그런지 생각보다 강의가 길었습니다 애니메이션을 구현할 때 좀 더 다양한 팁이랑 새로운 기능들을 배울 수 있었고 이번엔 저번 기초 파트보다 각 섹션 별로 예제도 많아지고 중간에 필요한 js 설명이랑 수강생입장에서 궁금해할 거 같은 부분을 미리 캐치하시고 설명해 주시는 부분이 좋았습니다. 항상 범쌤 수업 들을 때마다 느끼는 거지만 쉽고 재밌게 잘 가르쳐 주시는거같아요 다음 스크롤 트리거 강의도 너무 기대됩니다 빨리 나왔으면 좋겠어요! 수업 하나하나 정말 재밌게 봤습니다 👍👍 정성스러운 강의 제작하시느라 고생하셨습니닷!!🐯🐯

5.0

hoon Cli

100% 수강 후 작성

강의 가격이 만만찮아서 구매전에 정말 망설였는데 part2 내용이 정말 알차서 잘샀구나 싶습니다. gsap 플러그인, 메서드, 콜백 등은 기본이고 실습자료로 주시는 예시와 소스들 자체도 활용할 부분이 많아보입니다. 그리고 1회 완주한 소감은 과연 여기서 배운 걸 적재적소에 활용하려면 얼마나 연습을 해야할지 기쁘면서도 걱정이 되네요. 다음 스크롤트리거 강의도 기대됩니다.

5.0

aldald9505

100% 수강 후 작성

1편에 이어 2편도 너무나도 알찬 강의였습니다

수강 후 이런걸 얻을 수 있어요

GSAP 사용방법
애니메이션의 이해
웹에 대한 이해
HTML 구조
GSAP Plugin

다양한 코드, 다양한 애니메이션으로
GSAP 더 멋지게 더 강력하게! 😎

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

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

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

GSAP 더 잘 쓰고 싶은데...
한국어 자료가 너무 없다구요? 🥲

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

이 강의는 지난 GSAP 기초 강의에서 이어지는 심화편 Part. 02 강의입니다. 기초 강의에서 배운 내용을 그대로 응용해 보다 다양한 코드와 애니메이션을 적용해 볼 수 있도록 구성했습니다.

Animation Controls

👉 GSAP에서 제공하는 다양한 애니메이션 컨트롤 방법을 학습합니다.

DeepDive

👉 자주 쓰이는 애니메이션의 콜백 처리 및 3D 효과를 사용해 GSAP의 도구적 특징을 보다 깊게 이해합니다.

Advanced Stagger

👉 Stagger의 다양한 응용 및 활용 방법과 핸들링에 대해 학습합니다.

Advanced Timeline

👉타임라인을 효율적으로 관리하는 방법과 함수 중심의 애니메이션 설계에 대해 학습합니다.

* 수업 예제인 토이스토리는 고유진님의 디자인 작업물입니다.

잘 알지 못했던 GSAP의 다양한 속성들과 메서드를 경험함으로써 습득력을 높이고, 애니메이션을 체계적으로 구축하고 관리하는 방법을 익혀보세요! GSAP의 기초부터 튼튼히 단계를 밟아 올라간다면, 나중엔 자유롭게 응용하는 순간이 오게 될 겁니다. 😄

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

✅ 애니메이션을 보면 내부적으로 GSAP의 어떤 속성과 메서드가 사용되었는지 유추할 수 있습니다.
✅ 어렵지 않게 만들고 싶은 애니메이션을 그대로 구현해가는 자신을 볼 수 있게 됩니다.
✅ 섹션마다 배운 내용을 응용해 만들어 볼 수 있는 실습 자료가 준비되어 있어요!

💡 Part. 02를 잘 이해하면 앞으로 이어질 Part. 03의 ScrollTrigger 강의에서 얻어갈 내용이 훨씬 많아집니다.

Q&A 💬

Q. 왜 GSAP을 배워야 하나요?

생산성이 중요한 웹 개발자에게 있어 순수 자바스크립트만으로 애니메이션을 구현하는 일은 굉장히 불합리하고 불필요합니다. 이럴 때 잘 만들어져 있는 도구를 사용한다면 더욱 편리하겠죠? 못을 손으로 박지 않고 망치를 사용하는 것처럼 말이죠.

Q. GSAP을 배우면 뭐가 좋은가요?

애니메이션을 분석하는 능력이 생기며, 이렇게 분석한 애니메이션을 아주 쉽게 내 프로젝트에 반영해볼 수 있습니다.

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

모든 웹 작업물에 애니메이션을 넣을 수 있으며, 정적인 웹사이트를 보다 다이나믹하게 연출할 수 있습니다.

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

이런 분들께
추천드려요

학습 대상은
누구일까요?

GSAP을 알고있지만 보다 깊게 이해하고 싶은 개발자
인터랙티브 웹에 관심있는 개발자
웹 애니메이션을 만들어 보고 싶은 개발자
인터랙티브 웹이 궁금한 디자이너
GSAP의 설명이 필요한분

선수 지식,
필요할까요?

HTML, CSS, JavaScript
지난 Part.01 강의에서 이어지는 강의입니다.

안녕하세요
범쌤입니다.

커리어인증

4,649

명

수강생

256

개

수강평

309

개

답변

4.9

점

강의 평점

개

강의

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

커리큘럼

전체

47개 ∙ (12시간 18분)

해당 강의에서 제공:

수업자료

섹션 1. Aniomation Controls

10개 ∙ (2시간 40분)

1. Start ! Advanced !
03:57
2. 피그마에서 SVG 내보내기
08:30
3. 환경 세팅하기
09:10
4. motionPath 가져오기
08:44
5. Getter와 Setter 메서드
12:52
6. 애니메이션 재생, 정지, 재시작 버튼 구현
20:19
7. 인풋 컨트롤러
26:21
8. 트윈 진행률 가져오기
08:35
9. 버그와 리팩토링
33:23
10. Practice
28:49

섹션 2. Deep Dive

13개 ∙ (3시간 25분)

11. 콜백처리
26:40
12. 클래스 콜백처리
10:15
13. 타임라인 비주얼라이저 (1)
15:43
14. 타임라인 비주얼라이저 (2)
19:49
15. 트윈 죽이기(?)
05:11
16. 유틸 메서드 : gsap.utils.wrap()
22:07
17. 효과 등록하기 : gsap.registerEffect (1)
15:58
18. 효과 등록하기 : gsap.registerEffect (2)
08:12
19. CSS plugin : clearProps
16:24
20. 3D Transform
15:38
21. 런타임 랜더링
11:33
22. Practice (1)
14:50
23. Practice (2)
23:02

섹션 3. Advanced Stagger

12개 ∙ (2시간 58분)

24. 함수 기반의 애니메이션
18:37
25. 기속도 기반의 Stagger
09:25
26. 유틸 메서드 : gsap.utils.distribute()
09:50
27. 값 분배를 통한 애니메이션
14:06
28. 3D 텍스트 효과 (1)
15:03
29. Stagger의 반복 설정
11:11
30. 콜백 안에서의 Stagger 활용 (1)
18:49
31. 콜백 안에서의 Stagger 활용 (2)
19:08
32. 3D 텍스트 효과 (2)
20:21
33. Practice (1)
16:11
34. Practice (2)
11:08
35. Practice (3)
14:46

섹션 4. Advanced Timeline

9개 ∙ (2시간 23분)

섹션 5. GSAP Util Method

2개 ∙ (47분)

섹션 6. 마치며

1개 ∙ (2분)

강의 게시일:

마지막 업데이트일:

수강평

전체

32개

5.0

32개의 수강평

aldald9505
수강평 2
∙
평균 평점 5.0
5
100% 수강 후 작성
1편에 이어 2편도 너무나도 알찬 강의였습니다
hoon Cli
수강평 50
∙
평균 평점 5.0
5
100% 수강 후 작성
강의 가격이 만만찮아서 구매전에 정말 망설였는데 part2 내용이 정말 알차서 잘샀구나 싶습니다. gsap 플러그인, 메서드, 콜백 등은 기본이고 실습자료로 주시는 예시와 소스들 자체도 활용할 부분이 많아보입니다. 그리고 1회 완주한 소감은 과연 여기서 배운 걸 적재적소에 활용하려면 얼마나 연습을 해야할지 기쁘면서도 걱정이 되네요. 다음 스크롤트리거 강의도 기대됩니다.
Jandi Kim
수강평 5
∙
평균 평점 5.0
5
32% 수강 후 작성
너무 잘 가르쳐주셔서 항상 감사합니다.'어렵네요 ㅠ
김형진
수강평 22
∙
평균 평점 5.0
5
100% 수강 후 작성
수강 완료했습니다!! 😆 저번 기초 파트에 이어서 gsap에 대해 좀 더 깊이 있게 다뤄서 그런지 생각보다 강의가 길었습니다 애니메이션을 구현할 때 좀 더 다양한 팁이랑 새로운 기능들을 배울 수 있었고 이번엔 저번 기초 파트보다 각 섹션 별로 예제도 많아지고 중간에 필요한 js 설명이랑 수강생입장에서 궁금해할 거 같은 부분을 미리 캐치하시고 설명해 주시는 부분이 좋았습니다. 항상 범쌤 수업 들을 때마다 느끼는 거지만 쉽고 재밌게 잘 가르쳐 주시는거같아요 다음 스크롤 트리거 강의도 너무 기대됩니다 빨리 나왔으면 좋겠어요! 수업 하나하나 정말 재밌게 봤습니다 👍👍 정성스러운 강의 제작하시느라 고생하셨습니닷!!🐯🐯
이연수
수강평 2
∙
평균 평점 4.0
5
100% 수강 후 작성
복습하러 자주 오겠습니다. 설명해주시는 능력 정말 최고세요. 강의 듣기 전 gsap에 대한 기초 개념도 없이 바로 실전에서 활용했었습니다;; 이해도가 전혀 없는 상태라 gsap 사용한 홈페이지들을 많이 보고 따라해봐도 문법이 너무 많아서 헷갈리고ㅠ 그래서 gpt 한테 물어보고 작성해 달라하고, 레퍼런스를 아예 복붙해서 쓰던지 거의 바닥을 기면서 프로젝트를 끝냈었습니다 ㅋㅋ.. 이 강의 덕분에 gsap에 대한 전반적인 이해와 응용을 할 수 있게 되었습니다.! gsap 다른 선생의 강의 들어보면 ~이런게 있다. 하면서 수박 겉햝기 식으로 쌩쌩 넘어가서 정말 환불하고 싶은 강의가 있었는데,, 범 선생님은 뭐가 뭔지 하나씩 제대로 짚어가며 이해시키려고 노력하시는 모습에 감동받았습니다. 이 선생님 강의는 명강의입니다,, 강의 볼 때 마다 수강료를 지불해야할 것 같은 기분이 듭니다. 복습하러 자주 오겠습니다. 설명해주시는 능력 정말 최고세요.

범쌤님의 다른 강의

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

비전공자도 쉽게 배우는 클로드 디자인

범쌤

비전공자나 디자이너가 아니더라도 Claude Design과 피그마를 활용해 웹 UI, 제안서, 디자인 시스템까지 직접 만들고 수정하는 방법을 배웁니다. 실무에서 바로 사용할 수 있도록 클로드 코드와 클로드 디자인의 차이부터 설치, 플러그인 활용, 컴포넌트 기반 UI 제작, 디자인 수정 및 운영중인 서비스 적용 방법까지 단계별로 실습 중심으로 진행합니다. 디자인 툴이 어려웠던 개발자·기획자·마케터도 AI와 컴포넌트 기반 워크플로우를 통해 빠르게 결과물을 만드는 경험을 할 수 있도록 돕는 강의입니다.

입문

Figma, terminal, figma-plugin

비전공자도 쉽게 배우는 클로드 디자인

범쌤

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

범쌤

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

초급

scrolltrigger, gsap, 인터랙티브 웹

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

범쌤

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

범쌤

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

초급

gsap, 인터랙티브 웹, JavaScript

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

범쌤

디자인 시스템 with 피그마

범쌤

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

초급

Figma, Figma Tokens, 디자인 시스템

디자인 시스템 with 피그마

범쌤

비슷한 강의

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

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

범쌤

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

초급

scrolltrigger, gsap, 인터랙티브 웹

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

범쌤

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

범쌤

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

초급

gsap, 인터랙티브 웹, JavaScript

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

범쌤

자바스크립트 입문자를 위한 강의

JeongTaeHyun

자바스크립트 입문을 하시고 싶으신가요? 그럼 저의 강의를 선택해 주세요.

초급

JavaScript

자바스크립트 입문자를 위한 강의

JeongTaeHyun

Tailwind CSS 실전 포트폴리오 퍼블리싱

코딩웍스(Coding Works)

[Tailwind CSS 실전 포트폴리오 퍼블리싱]은 Tailwind CSS를 활용해 26가지 이상의 다양한 실전 예제 제작하는 과정입니다. 실전 예제를 빠르게 다양하게 제작하면 그 속에서 필수적인 이론을 설명합니다. 해당 강의는 개발자와 퍼블리셔가 만드는 Tailwind CSS 스타일링을 중심으로 제작되었습니다.

초급

TailwindCSS, HTML/CSS

Tailwind CSS 실전 포트폴리오 퍼블리싱

코딩웍스(Coding Works)

자바스크립트+jQuery 기초부터 실무까지 : 고급 Part.1

유용한IT학습

이론과 실습을 통해 자바스크립트를 익힐 수 있는 강의입니다. 자바스크립트에 어느 정도 익숙해진 분들을 위한 강의입니다. Part 1은 자바스크립트의 클래스와 객체지향 프로그래밍의 내용을 다루고 있습니다.

중급이상

JavaScript, jQuery

자바스크립트+jQuery 기초부터 실무까지 : 고급 Part.1

유용한IT학습

Figma 디자인부터 퍼블리싱까지

Michael Kwon

디자이너와 개발자를 위한 올인원 강좌! 새로운 UI3 반영

초급

HTML/CSS, Figma

Figma 디자인부터 퍼블리싱까지

Michael Kwon

누구보다 빠르게 배우는 Springboot + ReactNative RestAPI 게시판 만들기

Neo

누구보다 빠르게 배우는 Springboot + ReactNative RestAPI 게시판 만들기 Springboot 로 CRUD 서버를 개발하고 ReactNative로 나만의 게시판을 만들어보세요!!

초급

JavaScript, React Native, Java

누구보다 빠르게 배우는 Springboot + ReactNative RestAPI 게시판 만들기

Neo

Firebase 시리즈 #1: 소셜 로그인·휴대폰·위치 인증 완벽 가이드

닭강정

🔥 HTML + Tailwind CSS + 순수 JavaScript만으로 완성하는 Firebase 사용자 인증! 소셜 로그인·휴대폰·위치 인증까지, 복잡한 백엔드 없이 쉽고 빠르게 계정 시스템 구축합니다.

초급

HTML/CSS, JavaScript, Firebase

Firebase 시리즈 #1: 소셜 로그인·휴대폰·위치 인증 완벽 가이드

닭강정

중상급 퍼블리싱을 위한 CSS3의 모든 것

코딩웍스(Coding Works)

[중상급 퍼블리싱을 위한 CSS3의 모든 것] 강의에서 부족한 퍼블리싱 이론을 확실하게 갖추실 수 있습니다. 이론은 어느 정도 알지만 뭔가 만들려고 할 때 자신 있게 퍼블리싱이 안될 때가 자주 있습니다. 중상급 퍼블리싱 레벨의 실력을 위해 깊이 있게 이론을 학습하고 확실한 퍼블리싱 실력을 갖추기 위한 필수적인 코스입니다. [중상급 퍼블리싱을 위한 CSS3의 모든 것] 강의는 초급부터 중상급 실력을 목표하는 분들을 대상으로 CSS3 모든 이론과 이론을 응용하는 스킬과 노하우를 배울 수 있습니다.

초급

HTML/CSS

중상급 퍼블리싱을 위한 CSS3의 모든 것

코딩웍스(Coding Works)

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

유용한IT학습

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

초급

HTML/CSS, JavaScript

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

유용한IT학습

ES6 문법과 함께하는 모던 Javascript(자바스크립트) 고급 Part.3

유용한IT학습

자바스크립트 프로그래밍 언어를 최신의 ES6 문법과 함께 학습하도록 기획된 과정입니다.

중급이상

JavaScript, ES6

ES6 문법과 함께하는 모던 Javascript(자바스크립트) 고급 Part.3

유용한IT학습

SVG 멀티 스트로크 스크롤 애니메이션

두노피

svg를 이용하여 간단한 그림을 그리고 사이트에 적용시킵니다. 포트폴리오에 적용하면 돋보이는 페이지가 됩니다.

초급

HTML/CSS, JavaScript

SVG 멀티 스트로크 스크롤 애니메이션

두노피

UIUX 디자이너 취업을 위한 웹 포트폴리오 제작 : 퍼스널 브랜딩 전략

J.영

"2026년도 UIUX디자이너 |코딩하는 디자이너 에이전시 합격 포트폴리오 공개" 면접관의 눈길을 사로잡는 UIUX 웹 포트폴리오를 제작하는 실전 강의입니다. 단순한 포트폴리오 제작이 아닌, 인터랙션을 활용해 차별화된 결과물로 UIUX 디자이너로 취업 경쟁력을 높일 수 있도록 설계된 커리큘럼입니다.

초급

HTML/CSS, JavaScript, 웹앱

UIUX 디자이너 취업을 위한 웹 포트폴리오 제작 : 퍼스널 브랜딩 전략

J.영

Firebase 시리즈 #2: AI 한자 추천 & 필기 학습 플랫폼

닭강정

🔥 한자 학습을 위한 맞춤형 플랫폼 구축! Google Gemini AI와 Firestore를 활용해 나만의 한자 단어장, 획순 애니메이션, 필기 인식까지 직접 구현해보세요!

초급

gemini, HTML/CSS, TailwindCSS

Firebase 시리즈 #2: AI 한자 추천 & 필기 학습 플랫폼

닭강정

웹디자인개발기능사 [2025년] 실기전체 (카톡질문가능)

두노피

전국 합격률 60%중에 우리반 합격률은 90%! 시험요구사항을 파악하면 가능합니다. 실기 책 사지마요 어려워요

초급

HTML/CSS, jQuery

웹디자인개발기능사 [2025년] 실기전체 (카톡질문가능)

두노피

[환상의족발] 디자인부터 코딩까지

두노피

맛있는 족발이에요~ 요즘 족발 장난 아니던데...꿀꺽

초급

Photoshop, HTML/CSS, 클론코딩

[환상의족발] 디자인부터 코딩까지

두노피

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

김영보

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

초급

JavaScript, 면접, 기술면접

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

김영보