156,200원
월 31,240원
5개월 할부 시
초급자를 위해 준비한
[프론트엔드, 웹 퍼블리싱] 강의입니다.
“GSAP 이런 것까지 가능했어?” 애니메이션이 복잡하고 어렵다는 기존의 고정관념을 깨드립니다.
✍️
이런 걸
배워요!
이런 걸
배워요!
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 강의에서 이어지는 강의입니다.
안녕하세요
범쌤 입니다.
범쌤 입니다.
안녕하세요 디자인과 개발에 재미를 가지고 강의를 만드는 범쌤입니다 :)
커리큘럼
총 46 개
˙ 11시간 51분의 수업
이 강의는 영상, 수업 노트, 첨부 파일이 제공됩니다. 미리보기를 통해 콘텐츠를 확인해보세요.
섹션 0. Aniomation Controls
10 강
∙ 2시간 40분
Start ! Advanced !
미리보기
03:57
피그마에서 SVG 내보내기
미리보기
08:30
환경 세팅하기
09:10
motionPath 가져오기
08:44
Getter와 Setter 메서드
12:52
애니메이션 재생, 정지, 재시작 버튼 구현
20:19
인풋 컨트롤러
26:21
트윈 진행률 가져오기
08:35
버그와 리팩토링
33:23
Practice
28:49
섹션 1. Deep Dive
13 강
∙ 3시간 25분
콜백처리
26:40
클래스 콜백처리
10:15
타임라인 비주얼라이저 (1)
15:43
타임라인 비주얼라이저 (2)
19:49
트윈 죽이기(?)
미리보기
05:11
유틸 메서드 : gsap.utils.wrap()
22:07
효과 등록하기 : gsap.registerEffect (1)
15:58
효과 등록하기 : gsap.registerEffect (2)
08:12
CSS plugin : clearProps
16:24
3D Transform
15:38
런타임 랜더링
11:33
Practice (1)
14:50
Practice (2)
23:02
섹션 2. Advanced Stagger
12 강
∙ 2시간 58분
함수 기반의 애니메이션
18:37
기속도 기반의 Stagger
09:25
유틸 메서드 : gsap.utils.distribute()
09:50
값 분배를 통한 애니메이션
14:06
3D 텍스트 효과 (1)
15:03
Stagger의 반복 설정
11:11
콜백 안에서의 Stagger 활용 (1)
18:49
콜백 안에서의 Stagger 활용 (2)
19:08
3D 텍스트 효과 (2)
20:21
Practice (1)
16:11
Practice (2)
11:08
Practice (3)
14:46
섹션 3. Advanced Timeline
9 강
∙ 2시간 23분
순차적 애니메이션 제어하기
08:46
비순차적 애니메이션 제어하기
16:40
gsap.delayedCall()
13:19
타임라인 관리하기
12:21
함수 중심의 타임라인
12:12
Text Plugin
16:57
Practice (1)
19:22
Practice (2)
15:35
Practice (3)
28:34
섹션 4. GSAP Util Method
1 강
∙ 20분
유틸 메서드 : gsap.utils.mapRange()
20:42
섹션 5. 마치며
1 강
∙ 2분
마치며
02:27
강의 게시일 : 2023년 04월 18일
(마지막 업데이트일 : 2023년 04월 18일)
수강평
총 12개
수강생분들이 직접 작성하신 수강평입니다.
5
12개의 수강평
5점
4점
3점
2점
1점
VIEW
추천 순
최신 순
높은 평점 순
낮은 평점 순
평점 순
높은 평점 순
낮은 평점 순
GSAP에 대해서 인터넷으로 혼자 공부할 때 너무 막막했는데 파트1부터 2까지 쭉 들으니까 생각보다 놓치고 몰랐던 부분이 상당히 많았구나 깨달았습니다.
확실히 강의를 들으면서 의미부터 원리까지 이해하는데 많은 도움이 되었습니다.
파트3도 달릴 예정입니다!!
2024-01-17
gsap 대충보고 대충 사용하던 지난 과거는 이제 그만, 드디어 나도 이해해서 사용한다. 마치 사고가 확장된듯한 경험이였다. 빠르게 스크롤 트리거까지 마스터 하고싶다!
2024-02-07
수강 완료했습니다!! 😆
저번 기초 파트에 이어서 gsap에 대해 좀 더 깊이 있게 다뤄서 그런지 생각보다 강의가 길었습니다
애니메이션을 구현할 때 좀 더 다양한 팁이랑 새로운 기능들을 배울 수 있었고
이번엔 저번 기초 파트보다 각 섹션 별로 예제도 많아지고 중간에 필요한 js 설명이랑
수강생입장에서 궁금해할 거 같은 부분을 미리 캐치하시고 설명해 주시는 부분이 좋았습니다.
항상 범쌤 수업 들을 때마다 느끼는 거지만 쉽고 재밌게 잘 가르쳐 주시는거같아요
다음 스크롤 트리거 강의도 너무 기대됩니다 빨리 나왔으면 좋겠어요!
수업 하나하나 정말 재밌게 봤습니다 👍👍
정성스러운 강의 제작하시느라 고생하셨습니닷!!🐯🐯
2023-05-03
눈으로만 호강하던 효과를 직접 프로젝트에 녹일 수 있게 되었을 때의 짜릿함을 경험하게 해주셔서 감사합니다 ㅎㅎ 이제 22강 정도 들었는데, 시간이 학습하고, 공부하고, 적용해보고 하다보니 순삭이네요. 이게 다 설명도 잘해주시고, 노션으로도 자료 남겨주셔서 심리적인 부담감이 줄고 흥미와 재미가 뿜뿜되어서 그런 것 같습니다. 빨리 스크롤 트리거 부분도 나가고 싶네요. !!!!!!! 강의만 다 사두고 똥줄만 타고 있습니다 .
2023-11-11
안녕하세요!
gsap을 배우고싶다라는 생각을 가지고 파트1부터 2까지 수강을 했습니다.
파트 2는 조금 더 확실하게 공부를 하고 싶어서 2번까지 완강을 진행 하였구요
확실히 이전보다 애니메이션을 보는 관점이나 사용하는 부분에서 너무나도 발전이 된 것 같아요!
스크립트도 반복해서 사용하다보니 익숙해지고 있구요 너무 감사드립니다!!
다음 파트가 드디어 너무 배우고 싶었던 스크롤트리거인데 빨리 완강하고 싶네요!
좋은 강의 올려주셔서 감사합니다!
2024-01-28
