너무 유익하고 재밌게 잘 들었습니다. 아무래도 이직하기 위해 슬슬 포트폴리오 만들 생각이였는데 최대한 gsap를 활용해서 좋은 포폴 사이트 만들 예정입니다. 다음에 svg 강의도 들을 예정입니다. 감사합니다. 추후에 리엑트 강의등 하실 계획 있으시면 Gsap도 함께 섞어서 어떻게 사용해서 보여주실 수있는지도 보여주시면 감사합니다.

5.0

한봉경

100% 수강 후 작성

1-3 전부 완강했습니당! 솔직히 한번 듣고 다 이해한다면 천재라고 생각해요 ㅠㅠ 그래도 무작정 계속 끝까지 완강해보니 대략적인 GSAP의 큰그림을 볼 수 있었어요! 실무에서 필요할 때마다 중간중간 회독하면서 연습해보면서 활용해보려 합니다! 처음 gsap을 접했을 때 다가왔던 무지성 공포감은 많이 없어진 상태이고, 자연스럽게 만질 수 있는 제 자신이 만족스럽습니다 ㅎ 감사합니당!!

5.0

뽀로링

100% 수강 후 작성

파트1 부터 파트3 까지 완강했습니다. 모두 알찬 내용들로만 가득했습니다. scrollTrigger 관련한 강의는 한국에 정말 몇 없는데, 덕분에 원하던 인터랙티브한 포트폴리오를 제작해 원하는 곳으로 이직 성공했습니다! 좋은 강의 올려주셔서 감사합니다. 다음 파트4도 기대가되네요!

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

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,523

명

수강생

241

개

수강평

305

개

답변

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분)

강의 게시일:

마지막 업데이트일:

수강평

전체

20개

5.0

20개의 수강평

Taeyoon
수강평 7
∙
평균 평점 5.0
5
100% 수강 후 작성
너무 유익하고 재밌게 잘 들었습니다. 아무래도 이직하기 위해 슬슬 포트폴리오 만들 생각이였는데 최대한 gsap를 활용해서 좋은 포폴 사이트 만들 예정입니다. 다음에 svg 강의도 들을 예정입니다. 감사합니다. 추후에 리엑트 강의등 하실 계획 있으시면 Gsap도 함께 섞어서 어떻게 사용해서 보여주실 수있는지도 보여주시면 감사합니다.
한봉경
수강평 3
∙
평균 평점 5.0
5
100% 수강 후 작성
1-3 전부 완강했습니당! 솔직히 한번 듣고 다 이해한다면 천재라고 생각해요 ㅠㅠ 그래도 무작정 계속 끝까지 완강해보니 대략적인 GSAP의 큰그림을 볼 수 있었어요! 실무에서 필요할 때마다 중간중간 회독하면서 연습해보면서 활용해보려 합니다! 처음 gsap을 접했을 때 다가왔던 무지성 공포감은 많이 없어진 상태이고, 자연스럽게 만질 수 있는 제 자신이 만족스럽습니다 ㅎ 감사합니당!!
뽀로링
수강평 3
∙
평균 평점 5.0
5
100% 수강 후 작성
파트1 부터 파트3 까지 완강했습니다. 모두 알찬 내용들로만 가득했습니다. scrollTrigger 관련한 강의는 한국에 정말 몇 없는데, 덕분에 원하던 인터랙티브한 포트폴리오를 제작해 원하는 곳으로 이직 성공했습니다! 좋은 강의 올려주셔서 감사합니다. 다음 파트4도 기대가되네요!
guvera2010
수강평 2
∙
평균 평점 5.0
5
100% 수강 후 작성
필요한 부분만 찾아서 듣기도하고 잘 봤어요. 강의를 듣다보니 gsap이 회사가 바뀌면서 홈페이지가 좀 바뀌고 그래서 혼돈은 있었지만 모든 플러그인이 무료가 되어서 더 좋았습니다.
Inyoung Jeong
수강평 2
∙
평균 평점 5.0
5
31% 수강 후 작성

월 ₩31,240

5개월 할부 시

₩156,200

범쌤님의 다른 강의

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

디자인 시스템 with 피그마

범쌤

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

초급

Figma, Figma Tokens, 디자인 시스템

디자인 시스템 with 피그마

범쌤

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

범쌤

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

초급

gsap, 인터랙티브 웹, JavaScript

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

범쌤

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

범쌤

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

초급

gsap, 인터랙티브 웹, JavaScript

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

범쌤

비슷한 강의

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

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

범쌤

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

초급

gsap, 인터랙티브 웹, JavaScript

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

범쌤

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

범쌤

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

초급

gsap, 인터랙티브 웹, JavaScript

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

범쌤

[웹 개발 풀스택 코스] 순수 자바스크립트 기초에서 실무까지

개발자의 품격

본 강의는 풀스택 웹 개발자 양성을 위한 [웹 개발 풀스택 코스] 강의 시리즈 중 자바스크립트에 대한 강의입니다. 이 강의는 지식공유자의 저서 <바닐라 자바스크립트>의 내용을 바탕으로 만들어진 강의입니다.

초급

JavaScript, vanilla-javascript

[웹 개발 풀스택 코스] 순수 자바스크립트 기초에서 실무까지

개발자의 품격

인터랙티브 웹 개발 제대로 시작하기

1분코딩

크리에이티브 넘치는 인터랙티브 웹페이지를 개발할 수 있는 기본기를 다질 수 있는 수업입니다.

초급

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

인터랙티브 웹 개발 제대로 시작하기

1분코딩

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

webstoryboy

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

초급

gsap, parallax, scrolltrigger

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

webstoryboy

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

깡코딩

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

초급

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

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

깡코딩

순수 html/css/js만을 활용한 반응형웹 제작[실전편] 부트캠프

영코디 킴쌤

부트스트랩(BOOTSTRAP)을 사용하지 않고 순수하게 html/css/js 만을 활용하여 디바이스별로 다양한 레이아웃을 구현할 수 있는 반응형 웹페이지 만들기[2024년 최신판] 수업의 실전 제작수업입니다.

초급

HTML/CSS, 반응형 웹, 인터랙티브 웹

순수 html/css/js만을 활용한 반응형웹 제작[실전편] 부트캠프

영코디 킴쌤

웹브라우저 Javascript (자바스크립트)

Egoing Lee

생활코딩 자바스크립트 강좌 입니다. 웹브라우저를 직접 제어할 수 있는 자바스크립트 레퍼런스를 공부해 봅니다.

초급

JavaScript

웹브라우저 Javascript (자바스크립트)

Egoing Lee

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

유용한IT학습

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

중급이상

JavaScript, ES6

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

유용한IT학습

아직도 살아 있는 불사의 jQuery - 기초 부터 실무까지

이지웹

전세계 웹사이트에서 75%이상이 사용하고 있는 javascript 라이브러리 jQuery ! 화려한 효과보다는 원리를 이해하며 기본기를 다질수 있도록 구성했습니다. 제이쿼리 기초부터 활용까지 학습하여 여러분만의 포트폴리오를 완성하거나, 현업에서 바로 활용해보세요.

초급

HTML/CSS, JavaScript, jQuery

아직도 살아 있는 불사의 jQuery - 기초 부터 실무까지

이지웹

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

webstoryboy

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

초급

HTML/CSS, jQuery, JavaScript

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

webstoryboy

html - SVG scroll animation 효과 - 특별한 포트폴리오를 위한 그림 15종 증정

두노피

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

초급

HTML/CSS, JavaScript

html - SVG scroll animation 효과 - 특별한 포트폴리오를 위한 그림 15종 증정

두노피

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

Jay

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

초급

HTML/CSS, JavaScript, REST API

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

Jay

[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - NestJS Core

코드팩토리

자바스크립트, 타입스크립트 다음은 백엔드 개발! NestJS를 이용한 REST API 백엔드 개발, Socket IO 개발 및 배포를 할 수 있게 됩니다.

초급

NestJS, REST API, backend

[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - NestJS Core

코드팩토리

뉴비를 위한 자바스크립트

얄팍한 코딩사전

코딩을 자바스크립트로 시작하시는 분들을 위한, 가장 쉬운 자바스크립트 강의입니다.

입문

JavaScript

뉴비를 위한 자바스크립트

얄팍한 코딩사전

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

잔재미코딩 DaveLee

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

입문

HTML/CSS, JavaScript, ES6

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

잔재미코딩 DaveLee

비전공자를 위한 진짜 입문 올인원 개발 부트캠프

그랩

왕초보도 할 수 있는 웹, 서버, 모바일 앱, 머신러닝까지 익히는 끝판왕 풀스택 강의!! 개발을 어디서부터 시작할지 막막했다면 이 강의를 강력 추천할게요. Javascript 하나로 진행합니다!

입문

JavaScript, React, Node.js

비전공자를 위한 진짜 입문 올인원 개발 부트캠프

그랩

바이브 코딩 With Claude Code로 웹 서비스 만들기

개발 까마귀

현직 스타트업 CTO가 실제 서비스와 여러 외주를 통해서 얻은 바이브코딩 지식 전수해드립니다.

입문

HTML/CSS, JavaScript, Next.js

바이브 코딩 With Claude Code로 웹 서비스 만들기

개발 까마귀

Azure Native로 나만의 GPT 만들기

정동형

Azure의 여러 리소스들을 사용해서 여러분들만의 GPT를 만들고, 배포하는 강의입니다. 처음부터 끝까지! 아무것도 없는 백지에서 완전한 서비스를 배포해봅시다!

초급

Azure, FastAPI, MongoDB

Azure Native로 나만의 GPT 만들기

정동형

[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스

코드캠프

코딩과 사랑에 빠져버린 8년차 풀스택 개발자 Captain의 사심이 가득 담긴 커리큘럼이에요. 백엔드의 모든 것을 다 알려주고 싶은 Captain의 마음이 녹아있죠! 이 강의를 듣다보면 '이렇게까지 알려준다고?' 하는 생각을 떨칠 수 없을 거예요. 모두가 어려워하는 부분까지 꼭꼭 씹어 떠먹여주는 이 강의로 시작해 볼까요?

입문

NestJS, Node.js, JavaScript

[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스

코드캠프

연관 로드맵

강의가 포함된 로드맵으로 학습해 보세요!

웹 애니메이션을 위한 GSAP 완벽 가이드!

범쌤

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

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

5.0

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

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

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

이런 분들 주목하세요!

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

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

Q&A 💬

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

이런 분들께 추천드려요

안녕하세요 .css-1q3zd4q{text-decoration-line:underline;text-underline-position:under;text-underline-offset:1px;}입니다.

커리큘럼

수강평

범쌤님의 다른 강의

비슷한 강의

연관 로드맵

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

이런 분들께
추천드려요

안녕하세요
입니다.