Hệ thống thiết kế với figma
kindtiger
Thông qua bài giảng này, hãy xây dựng một hệ thống thiết kế và cảm nhận sức mạnh tổng hợp bùng nổ trong công việc thiết kế của bạn.
초급
Figma, Figma Tokens, Design System
BEST
웹 애니메이션을 위한 GSAP 가이드 Part.02
“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 강의에서 이어지는 강의입니다.
4,377
명
수강생
221
개
수강평
291
개
답변
4.9
점
강의 평점
5
개
강의
---안녕하세요 디자인과 개발에 재미를 가지고 강의를 만드는 범쌤입니다 🙂 -----------------------------------------------------온라인 / 오프라인 출강 문의는 seonbeom2@gmail.com 으로 연락주세요 🙇♂
커리큘럼
전체
47개 ∙ (12시간 18분)
해당 강의에서 제공:
수업자료
2. 피그마에서 SVG 내보내기
08:30
3. 환경 세팅하기
09:10
4. motionPath 가져오기
08:44
7. 인풋 컨트롤러
26:21
8. 트윈 진행률 가져오기
08:35
9. 버그와 리팩토링
33:23
10. Practice
28:49
11. 콜백처리
26:40
12. 클래스 콜백처리
10:15
13. 타임라인 비주얼라이저 (1)
15:43
14. 타임라인 비주얼라이저 (2)
19:49
15. 트윈 죽이기(?)
05:11
20. 3D Transform
15:38
21. 런타임 랜더링
11:33
22. Practice (1)
14:50
23. Practice (2)
23:02
24. 함수 기반의 애니메이션
18:37
25. 기속도 기반의 Stagger
09:25
27. 값 분배를 통한 애니메이션
14:06
28. 3D 텍스트 효과 (1)
15:03
29. Stagger의 반복 설정
11:11
32. 3D 텍스트 효과 (2)
20:21
33. Practice (1)
16:11
34. Practice (2)
11:08
35. Practice (3)
14:46
강의 게시일:
마지막 업데이트일:
수강평
전체
29개
5.0
29개의 수강평
- hjux
수강평 20
∙
평균 평점 5.0
5
100% 수강 후 작성Tôi đã hoàn thành khóa học!! 😆 Bài giảng dài hơn tôi mong đợi vì nó trình bày sâu hơn về gsap sau phần cơ bản cuối cùng. Tôi đã có thể tìm hiểu thêm các mẹo và tính năng mới khi triển khai hoạt ảnh. Lần này, có nhiều ví dụ cho mỗi phần hơn phần cơ bản cuối cùng và các giải thích js cần thiết được đưa vào giữa. Tôi thích phần mà học sinh có thể nắm bắt và giải thích trước những điều mà các em có thể tò mò. Tôi luôn có cảm giác như vậy mỗi lần đến lớp của thầy Beom, thầy dạy rất hay và vui vẻ. Tôi thực sự mong đợi bài giảng kích hoạt cuộn tiếp theo. Tôi hy vọng nó sẽ sớm ra mắt! Tôi thực sự rất thích mỗi buổi học 👍👍 Cảm ơn bạn đã bỏ công sức biên soạn một bài giảng chi tiết!!🐯🐯
hooncli수강평 50
∙
평균 평점 5.0
5
100% 수강 후 작성Tôi thực sự lưỡng lự trước khi mua vì giá của khóa học rất cao nhưng nội dung phần 2 thực sự rất nhiều thông tin nên tôi nghĩ đó là một giao dịch mua tốt. Các plugin, phương thức, lệnh gọi lại gsap, v.v. đều cơ bản và bản thân các ví dụ cũng như nguồn làm tài liệu thực hành dường như có nhiều công dụng. Và về cảm giác của tôi sau khi hoàn thành cuộc đua lần đầu tiên, tôi vừa vui vừa lo lắng về việc mình sẽ cần luyện tập bao nhiêu để áp dụng những gì đã học ở đây vào đúng chỗ. Tôi đang mong chờ bài giảng kích hoạt cuộn tiếp theo.
- aldald95058004
수강평 2
∙
평균 평점 5.0
- dldustn15115743
수강평 2
∙
평균 평점 4.0
5
100% 수강 후 작성Tôi sẽ quay lại thường xuyên để xem xét. Khả năng giải thích mọi thứ của bạn thực sự tuyệt vời. Trước khi nghe bài giảng, tôi đã sử dụng GSAP trong thực tế mà không hề biết căn bản;; Tôi không hiểu gì cả nên tôi xem rất nhiều trang web sử dụng gsap và cố gắng theo dõi nhưng có quá nhiều ngữ pháp khiến tôi bối rối. Vì vậy, tôi đã hỏi gpt và yêu cầu anh ấy viết nó, và tôi chỉ sao chép và dán các tài liệu tham khảo và hoàn thành dự án trong khi gần như thất bại. Nhờ bài giảng này, tôi đã có thể hiểu biết tổng quát và ứng dụng được gsap! Nếu bạn nghe bài giảng của một giáo viên gsap khác thì sẽ thấy có điều như thế này. Có một bài giảng tôi rất muốn hoàn lại vì tôi đã bỏ qua nó như một quả dưa hấu. Tôi rất ấn tượng với cách cô Beom cố gắng hiểu chuyện gì đang xảy ra bằng cách chỉ ra từng chuyện một. Bài giảng của thầy hay quá, mỗi lần xem bài giảng tôi cảm thấy như phải đóng học phí vậy. Tôi sẽ quay lại thường xuyên để xem xét. Khả năng giải thích mọi thứ của bạn thực sự tuyệt vời.
- ekgml52338089
수강평 2
∙
평균 평점 5.0
월 ₩656,675
5개월 할부 시
₩156,200
![[Giới thiệu về Phát triển Web] Tự phát triển HTML và CSS với Carrot Market강의 썸네일](https://cdn.inflearn.com/public/courses/329537/cover/e58304bd-ac81-4ec4-88c8-479cde58188a/329537-eng.png?f=avif&w=420)
