156,200원
월 31,240원
5개월 할부 시
초급자를 위해 준비한
[프론트엔드, 웹 퍼블리싱] 강의입니다.
웹 애니메이션의 꽃, 스크롤 애니메이션! GSAP을 보다 강력하게 사용할 수 있는 ScrollTrigger에 대해 학습합니다.
✍️
이런 걸
배워요!
이런 걸
배워요!
GSAP 사용 방법
스크롤 애니메이션의 이해
GSAP 활용
GSAP 애니메이션의 꽃, 스크롤트리거
원리부터 응용까지 완벽 정리!
자바스크립트 애니메이션 라이브러리, GSAP
GreenSockAnimationPlatform(GSAP)을 보다 깊게 이해하고, 애니메이션을 체계적으로 구축하고 관리하는 방법에 대해 배워봅니다.
✅ GSAP을 더 잘 쓰고 싶다면!
✅ 더 다양한 코드와 애니메이션, 실습 자료까지!
GSAP 스크롤 애니메이션?
“별 거 아니네” 할 수 있게 해드릴게요!
“ScrollTrigger 대충은 써봤는데.. 어떻게 응용하는지 잘 모르겠어요 😥”
👉 걱정 마세요! 스크롤 애니메이션, ScrollTrigger 제대로 배울 수 있게 도와드릴게요!
GSAP을 어느 정도 사용해 봤는데, 더 깊게 이해하고 제대로 사용해보고 싶으신가요? 제대로 된 한글 문서나 가이드가 없어서 여전히 어렵게 느껴지시나요? GSAP은 기초 문법만으로도 여러 애니메이션을 넣을 수 있지만, 속성을 깊이 파고 들어가면 갈수록 더욱 더 다양한 애니메이션 핸들링을 할 수 있습니다.
이 강의는 지난 GSAP Part. 01 그리고 Part. 02에서 이어지는 Part. 03 강의입니다. 인터랙티브 웹에서 필수 요소인 스크롤 애니메이션을, GSAP 기능을 적극적으로 활용하면서 내 손으로 확실하게 익혀보세요!
이런 분들 주목하세요!
- ScrollTrigger를 제대로 배우고 싶은 개발자
- 스크롤 애니메이션이 궁금한 디자이너
- 웹 애니메이션에 흥미를 가지고 있는 개발자
ScrollTrigger 기본 문법과 애니메이션에 대해 학습합니다.
기본 이론을 바탕으로 하나의 웹페이지 애니메이션을 구성합니다.
인터랙티브 웹 필수 요소인 부드러운 스크롤 방식을 proxy(우회)해서 무료로 사용하는 방법에 대해 학습합니다.
디테일한 애니메이션 컨트롤을 위한 ScrollTrigger CallBack에 대해 학습합니다.
스크롤을 막고 애니메이션을 제어하는 방법을 학습합니다.
스크롤 진행에 맞춰 UI가 그려지는 애니메이션을 학습합니다.
스크롤에 따른 애니메이션 토글 방식에 대해 학습합니다.
배운 내용을 바탕으로 하나의 완성도 있는 웹사이트 애니메이션을 구현합니다.
스크롤값에 따라 비디오의 재생을 컨트롤할 수 있는 애니메이션에 대해 학습합니다.
텍스트 플러그인을 활용해 다이나믹한 글자 애니메이션을 만들고 반응형에 대해 관리하는 방법을 알아봅니다.
SVG를 플러그인과 함께 스크롤에 따라 그려지도록 컨트롤합니다.
인터랙티브 웹 필수 요소인 SPA(Single Page Application)의 작동 방식과 ScrollTrigger의 연결 방법을 학습합니다.
가로형 레이아웃의 구현 방법과 ScrollTrigger의 연동에 대해 학습합니다.
가로, 세로가 섞인 형태의 레이아웃의 구현 방법과 ScrollTrigger의 연동에 대해 학습합니다.
ViewPort마다 다르게 작동하는 애니메이션을 설정하는 방법을 익힙니다.
접근성을 높이고 사용자가 애니메이션을 끄고 켤 수 있는 환경을 제공하는 Reduced-motion에 대해 학습합니다.
강의를 듣고 나면 할 수 있어요!
- ✅ 다른 사이트에서 보던 애니메이션들이 이런 식으로 작동하는구나~ 하고 알게 됩니다.
- ✅ 어렵지 않게 만들고 싶은 애니메이션을 그대로 구현해가는 자신을 볼 수 있게 됩니다.
- ✅ 섹션마다 배운 내용을 응용해 만들어 볼 수 있는 실습 자료가 준비되어 있어요!
Q&A 💬
Q. GSAP ScrollTrigger 를 배우면 어떤 일을 할 수 있나요?
웹사이트에 스크롤이 필요한 모든 곳에 애니메이션을 자유롭게 적용시킬 수 있습니다.
Q. 수업 내용을 어느 수준까지 다루나요?
기능만 설명하고 끝나는 강의가 아닌, 코어를 이해하고 실무에 바로 사용할 수 있을 정도로 진행합니다.
GSAP이 처음이라면? 지난 강의 살펴보기
이런 분들께 추천드려요!
🎓
학습 대상은
누구일까요?
학습 대상은
누구일까요?
GSAP을 배우고 싶은 개발자
웹 애니메이션이 궁금한 디자이너
스크롤 애니메이션이 궁금한 개발자
📚
선수 지식,
필요할까요?
선수 지식,
필요할까요?
웹 애니메이션을 위한 GSAP 가이드 파트 1
웹 애니메이션을 위한 GSAP 가이드 파트 2
HTML/CSS
JavaScript
안녕하세요
범쌤 입니다.
범쌤 입니다.
안녕하세요 디자인과 개발에 재미를 가지고 강의를 만드는 범쌤입니다 :)
커리큘럼
총 55 개
˙ 13시간 20분의 수업
이 강의는 영상, 수업 노트, 첨부 파일이 제공됩니다. 미리보기를 통해 콘텐츠를 확인해보세요.
섹션 0. Intro
3 강
∙ 28분
섹션 1. Basic Trigger
12 강
∙ 2시간 41분
환경설정
08:37
Basic Trigger (1)
11:27
Basic Trigger (2)
09:59
Scrub (1)
15:50
Scrub (2)
20:44
Pin (1)
13:33
Pin (2)
11:18
Parallax (1)
13:00
Parallax (2)
10:33
Practice (1)
19:42
Practice (2)
10:52
Practice (3)
16:08
섹션 2. Advanced Trigger
16 강
∙ 3시간 55분
Proxy (1)
16:38
Proxy (2)
13:43
Proxy (3)
19:42
Callback
19:55
PreventScroll
16:50
FastScrollEnd
19:13
Navigation Loop (1)
15:23
Navigation Loop (2)
12:36
Scroll Based Progress (1)
16:37
Scroll Based Progress (2)
16:14
Animation Toggle (1)
10:09
Animation Toggle (2)
09:39
Practice (1)
13:48
Practice (2)
13:00
Practice (3)
09:36
Practice (4)
12:30
섹션 3. Trigger with Plugin
12 강
∙ 3시간 16분
Video Controls (1)
14:25
Video Controls (2)
17:44
Text Effects
34:05
Scroll Draw SVG (1)
15:57
Scroll Draw SVG (2)
10:43
Single Page Application (1)
11:50
Single Page Application (2)
12:57
Single Page Application (3)
10:52
Practice (1)
17:50
Practice (2)
12:54
Practice (3)
16:24
Practice (4)
20:54
섹션 4. Layout
8 강
∙ 2시간 9분
Slide Layout
미리보기
08:46
Layerd Pinning Layout
05:51
OneScroll Layout (1)
25:09
OneScroll Layout (2)
19:16
Horizontal Layout (1)
16:39
Horizontal Layout (2)
11:44
Horizontal Layout (3)
20:04
Mixed Layout
21:53
섹션 5. Responsive & a11y
3 강
∙ 47분
Responsive (1)
13:11
Responsive (2)
16:51
Reduced-motion
17:10
섹션 6. 마치며
1 강
∙ 2분
마치며
02:04
강의 게시일 : 2023년 10월 26일
(마지막 업데이트일 : 2023년 10월 26일)
수강평
총 5개
수강생분들이 직접 작성하신 수강평입니다.
5
5개의 수강평
5점
4점
3점
2점
1점
VIEW
추천 순
최신 순
높은 평점 순
낮은 평점 순
평점 순
높은 평점 순
낮은 평점 순
구성이나 내용은 물론이고 알기쉽게 설명해주셔서 재미있게 볼 수 있는 강의입니다
독학으로 공부를 하는 입장에서 짧은 코드 한줄도 맞게 쓴 건지 불안할 때가 많은데, 질문에 항상 빠르고 자세하게 피드백 해주셔서 안심하고 수강할 수 있었습니다
2023-11-23
파트 1,2,3 모두 수강했는데 애니메이션을 어떻게 설계하고 만들어야 하는지에 대해 많이 배웠습니다. 정말 좋은 강의였어요
2024-02-16
part3 scrollTrigger 처음부터 끝까지 잘 봤습니다.
급하게 스크롤 애니메이션, 트윈 애니메이션을 적용해야 되서 part1, part3만 먼저 봤는데 강사님 강의 설명 열심히 해주셔서 실습 하면서 재밌게 봤어요. part2도 보면 더 좋을 거 같아서 결제 했습니다. 다 보고 멋진 사이트 구축해봐야겠어요. 감사합니다.
2024-03-19
자바스크립트 문법을 각 챕트예시로 적절하게 설명해주시고 하나의 예시를 여러가지 방법으로 접근해서 문제 해결력을 높이는데 도움이 됩니다. 공식문서도 한글로 해석해주셔서 수강하는데 편의성이 높습니다. 여러모로 많이 공들인 강의라고 느낍니다. 좋은강의 만들어주셔서 감사합니다.~
2023-11-12
강의 정말 좋은데, 완강하고 후기 남기려고 했는데, 완강이 쉽지가 않네요 ㅋㅋㅋ 재밌고 알찬데 다른 것도 할게 많아서 계속 진도가 미뤄지더라구요. 그래도 조금씩 나아가고 있는데, 정말 디테일하게 설명을 쉽게 알려주셔서 1강씩 배워나갈 때 마다 속이 채워지는 듯한 만족감입니다. 비록 아직은 완강하지 못했지만, 아마 다른 분들도 그런분들이 많을 것 같은데, 정말 좋은 강의인 것은 변함없는 사실인 것 같습니다. 계속 잘 듣겠습니다.
2024-04-15
