Hướng dẫn GSAP dành cho hoạt hình trên web Phần 02
kindtiger
“GSAP có khả thi không?” Chúng tôi sẽ phá bỏ định kiến hiện có rằng hoạt hình là phức tạp và khó khăn.
초급
gsap, Interactive Web, JavaScript
BEST
GSAP Guide for Web Animation Part.01
GSAP will take you one step closer to interactive web development and change the way you look at animation.
Reviews from Early Learners
What you will learn!
How to use GSAP
Understanding Animation
Understanding the Web
HTML structure
GSAP Plugin
GSAP grabs the core!
The interactive web, much easier and more convenient 🌠
Cool animations on the web?
Getting Started with JavaScript GSAP
Here's a Bridge clone coding page created using GSAP. (Link)
Are you interested in the interactive web? Do you want to create stunning web animations using JavaScript? Do you enjoy both design and development? GSAP is the groundbreaking platform for you.
GSAP, a JavaScript animation library
GSAP, created by GreenSock, is an animation platform that allows front-end developers, UI designers, and others to easily and conveniently create animations using JavaScript.
✅ If you are interested in interactive web, OK!
✅ Anyone who knows HTML, CSS & JavaScript!
However... despite the overwhelming appeal of GSAP, it is not easy to actually decide to use it.
This is because it is difficult to find proper Korean documents or learning materials.
But at the same time, GSAP provides various functions for the convenience of users.
Therefore, if you learn the core functions properly, anyone can easily use it.
I hope this course will help many people fall in love with GSAP and interactive web development!
The easiest and most fun way to learn
GSAP Guide A to Z
Build a strong foundation
To make it easier to understand the core features
I will explain each part one by one.
(Tween, Timeline, Keyframe...)
Practice with confidence
After the lecture, you can practice
Provides environment and challenges.
(Notion environment documentation and Timeline materials)
Even beginners can do it without worry
Even if you only know the basics of HTML/CSS + JS
You can learn enough.
(It would be even better if you knew CSS and JS in depth!)
💡 After learning GSAP, your perspective on animation will change!
Now, you'll see the principles of web animation, something you'd previously only seen and appreciated with a simple "Wow, that's pretty. " After taking this course, you'll be able to accurately predict which method and which property were used, and even implement them yourself, even when viewing the same animation.
The curriculum
Check it out.
What is GSAP?
GSAP is an animation platform built by GreenSock that allows you to animate any element controllable with JavaScript (CSS properties, SVG, React, Canvas, Normal Object, etc.). It also supports cross-browser compatibility across numerous browsers and is up to 20x faster than jQuery.
Understanding GSAP Core
Learn about the properties and methods of the GSAP object by directly checking the official GreenSock documentation.
Understanding Tween
Learn the principles of basic animation and create simple animations using Tween.
Understanding the Timeline
Learn how to control and manipulate the flow of time in your animations using the timeline.
Final result
Create your own animated web page intro.
💾 Course Environment and Learning Materials Guide
- The course uses CodePen , an online code editor, and can be used on both Windows and macOS.
- Learning materials are provided as Notion documents (Section 0 - Environment Configuration Lesson Notes).
- You should know basic HTML, CSS, and JavaScript .
Q&A 💬
Q. Why should I learn GSAP?
For web developers, where productivity is paramount, implementing animations with pure JavaScript is both irrational and unnecessary. Wouldn't it be more convenient to use a well-made tool? It's like using a hammer instead of your hands to drive nails.
Q. What are the benefits of learning GSAP?
You will gain the ability to analyze animations and easily incorporate them into your projects.
Q. What can I do if I learn GSAP?
You won't be able to create interactive web content right away after taking this class. However, since it's a course that builds a solid foundation, it'll be helpful if you take it with the mindset of solidifying your fundamentals :)
Q. Is there anything I need to prepare before attending the lecture?
It's recommended that you have prior knowledge of HTML, CSS, and JavaScript. While you can follow along without much knowledge, understanding the material will significantly broaden your understanding.
Q. What level of content is covered in the class?
Part 1 is a basic GSAP course. This course focuses on basic GSAP grammar and functions.
Recommended for
these people
Who is this course right for?
Developers who want to add animations to the web
Developers who want to use GSAP properly
Designers curious about web animation
Need to know before starting?
HTML
CSS
JavaScript
4,416
Learners
223
Reviews
292
Answers
4.9
Rating
5
Courses
---안녕하세요 디자인과 개발에 재미를 가지고 강의를 만드는 범쌤입니다 🙂 -----------------------------------------------------온라인 / 오프라인 출강 문의는 seonbeom2@gmail.com 으로 연락주세요 🙇♂
Curriculum
All
27 lectures ∙ (3hr 55min)
Course Materials:
Lecture resources
Published:
Last updated:
Reviews
All
61 reviews
5.0
61 reviews
milkteaReviews 26
∙
Average Rating 4.8
5
100% enrolledTôi đã hoàn thành khóa học chỉ trong nửa ngày! Tôi đã học GSAP trước đó một chút nên tôi biết một chút ngữ pháp cơ bản. Tôi cũng đã thử một dự án đơn giản. Đó là lý do tại sao tôi nghĩ rằng sự tiến bộ đã nhanh chóng. Trước thầy Beom, chưa có giáo viên nào cung cấp bài giảng trực tuyến về GSAP bằng tiếng mẹ đẻ của họ. Vì tôi đã nghe nó với sự hiểu biết sơ bộ về nó trên Udemy nên tôi nghĩ lần này tôi đã hiểu được rất nhiều khái niệm mà tôi chưa hiểu. Hãy để tôi để lại phản hồi trung thực của tôi Phần 1 là một bài giảng thực sự cơ bản! Vì nó tập trung vào ngữ pháp và khái niệm Không có nhiều dự án đồ chơi chuyên sâu liên quan đến vấn đề này. Tuy nhiên, bạn có thể tạo ra vô số ví dụ dựa trên ngữ pháp bạn đã học ở Phần 1. (Giống như bạn có thể tạo nhiều ví dụ khác nhau bằng Pure CSS, bạn cũng có thể tạo chúng bằng GSAP.) Lý do tôi nói với bạn điều này là vì hơi thất vọng khi có ít ví dụ. Nếu bạn cảm thấy nó quá dễ vì nó chỉ dạy ngữ pháp thì tôi khuyên bạn nên tham khảo nó. Vì tôi đã biết ngữ pháp cơ bản rồi Tôi đang chờ đợi những bài giảng chuyên sâu hơn về Toy Project. Tuy nhiên, lý do tôi mua khóa học này là vì đối với tôi nó giống như một cuốn từ điển ngôn ngữ bản địa GSAP. Tôi mua nó để có thể lấy ra bất cứ khi nào tôi quên ngữ pháp hoặc cách sử dụng một phương pháp nào đó. Mình thấy chóng mặt quá nên các bạn hãy upload hết Part 4 càng sớm càng tốt nhé.
- motep1326
Reviews 2
∙
Average Rating 5.0
5
19% enrolledWow, đây thực sự là bài giảng tôi đang tìm kiếm... Chỉ có các bài giảng về JavaScript cơ bản trên thị trường và tôi không thể tìm thấy bất kỳ bài giảng gsap nào ngoài các bài hướng dẫn được phát hành trong gsap, nhưng đây thực sự là một bài giảng tuyệt vời. Tôi đang tìm kiếm một thư viện hoạt hình có thể tạo đầu ra trong thực tế và điều này thực sự tốt. Cảm ơn bạn rất nhiều vì đã cung cấp bài giảng. Cảm ơn bạn rất nhiều, vui lòng đảm bảo phát hành bài giảng tiếp theo. Thầy sẽ được ban phúc đấy haha
- hjux
Reviews 20
∙
Average Rating 5.0
- euflynn
Reviews 4
∙
Average Rating 5.0
5
100% enrolledMình thường xuyên có các dự án tương tác nên mình đã tìm kiếm trên Google, xem code trên các blog liên quan và thử sử dụng nhưng lại thiếu rất nhiều thông tin cơ bản😂 Nó được tổ chức dưới dạng tài liệu Notion nên rất dễ hiểu bằng trực quan👍 Về phản hồi, chất lượng giảng dạy rất tốt. Nó cung cấp giải thích chi tiết và nắm bắt trước mọi vấn đề. Một điều hơi thất vọng là sẽ tốt hơn nếu bạn thêm một vài ví dụ nữa. Tôi muốn kiểm tra xem liệu có thể áp dụng nó theo cách này với nhiều ví dụ khác nhau hay không. Sẽ mất rất nhiều thời gian để tạo ra một bài giảng hay, nhưng ngay cả khi nguồn ví dụ không phải là bài giảng, tôi vẫn muốn xem lại nội dung bài giảng và xem các nguồn khác nhau của người hướng dẫn bằng cách cung cấp liên kết tới Code Fan. có thể tìm kiếm trực tiếp theo từ khóa trên Code Fan nhưng nó sẽ hiện ra nhưng chỉ có bài giảng thôi. Rất khó để tìm được nguồn sử dụng nó. Đó là một bài giảng thực sự hữu ích!
- sun5322
Reviews 4
∙
Average Rating 5.0
5
100% enrolledTrong khi làm việc, tôi phát hiện ra gsap trong mã của một trang web khác và quyết định tham gia lớp học vì tôi muốn học nó! Tôi ngơ ngác khi nhìn vào trang web tiếng Anh, nhưng tôi không thể tin được lại có một bài giảng như thế này đã dạy tôi từ những điều cơ bản! Nó có rất nhiều tính năng tuyệt vời, đa dạng và thú vị đến nỗi tôi tự hỏi liệu gsap có phải là tương lai của hoạt hình hay không! Tôi thực sự mong chờ phần tiếp theo~
Limited time deal ends in 6 days
$716,917.00
22%
$34.10
kindtiger's other courses
Check out other courses by the instructor!
Similar courses
Explore other courses in the same field!
![Bootcamp frontend vững chắc cho fullstack (HTML, CSS, vanilla JavaScript + ES6) [Fullstack Part2]강의 썸네일](https://cdn.inflearn.com/public/course-326306-cover/4ea213de-f786-4af1-a9d0-b8932263885a?f=avif&w=420)
![Chức năng phát triển thiết kế web [2025] Toàn bộ thực hành (có thể hỏi qua KakaoTalk)강의 썸네일](https://cdn.inflearn.com/public/courses/332868/cover/3a2245ca-bb9f-414a-ba67-403cfcb2b7c9/332868.jpg?f=avif&w=420)
