Design System with Figma
kindtiger
Through this course, you will build a design system and experience the explosive synergy of your design work.
초급
Figma, Figma Tokens, Design System
BEST
WebアニメーションのためのGSAPガイドPart.01
GSAPを使用すると、インタラクティブWeb開発に一歩近づくことができ、アニメーションの視点が変わります。
学習した受講者のレビュー
こんなことが学べます
GSAPの使い方
アニメーションの理解
Webの理解
HTML構造
GSAPプラグイン
コアをつかむGSAP！
インタラクティブウェブ、はるかに簡単で便利です🌠
ウェブ上で素晴らしいアニメーションを？
JavaScript GSAPを正しく起動する
GSAPを使用して作成したBridgeクローンコーディングページ。 (リンク)
インタラクティブウェブに興味をお持ちですか？ JavaScriptを使って素晴らしいWebアニメーションを実装したいですか？デザインと開発、両方の楽しみを見逃すことはできませんか？ GSAPはまさにそのような人のための画期的なプラットフォームです。
JavaScriptのアニメーションライブラリ、GSAP
GreenSockによって作成されたGSAPは、フロントエンド開発者、UIデザイナーなどがJavaScriptで簡単かつ便利にアニメーションを作成できるアニメーションプラットフォームです。
✅インタラクティブウェブに興味があればOK！
✅ HTML、CSS＆JavaScriptを書くことを知っている誰でも！
ところで…GSAPのあまりにも強力な魅力にもかかわらず、いざGSAPを書こうと思うのは容易ではありません。
まさにきちんとしたハングル文書や学習資料を見つけるのが難しいからです。
しかし同時に、GSAPはユーザーの便宜のためにさまざまな機能を提供しています。
そのため、コア機能だけを正しく習得すれば、誰でも簡単に活用できるようになります。
この講義を通して、多くの人がGSAPとインタラクティブなWeb開発の魅力に夢中になることを願っています！
最も簡単で楽しく学ぶ
GSAPガイドA to Z
基本を丈夫に
コア機能を理解しやすいように
パートごとに一つ一つ分けて説明します。
（Tween、Timeline、Keyframe...）
実習も自信を持って
講義を終えた後に実習してみることができる
環境と課題を提供します。
(ノッション環境文書およびタイムライン資料)
初心者でも心配なく
HTML/CSS + JS基礎だけを知っても
十分に学習できます。
（CSS、JSを深く知ればさらに良いです！）
💡 GSAPを学んだら？アニメを見る視点が変わります！
かつては「わ～きれい」くらいだけ見て感じたウェブアニメの原理が見えます。講義を聞いたら、同じアニメーションを見ても「どんなメソッドにどんな属性を使ったのか、それぞれのディレイ時間は何秒ぐらいだろうか」までも十分考えて、直接実装できるようになります。
カリキュラム
確認してみてください。
What is GSAP?
GSAPはGreenSockによって作成されたアニメーションプラットフォームで、JavaScriptで制御できるすべての要素にアニメーションを適用できます。 （CSSプロパティ、SVG、React、Canvas、Normal Objectなど...）また、多数のブラウザのクロスブラウジングをサポートし、jQueryに比べて最大20倍の高速パフォーマンスを提供します。
GSAPコアを理解する
GSAP オブジェクトが持っている Property と Method を GreenSock 公式ドキュメントを直接確認しながら学習します。
Tweenを理解する
基本的なアニメーションが適用される原理を学習し、Tweenを使って簡単なアニメーションを直接構成します。
タイムラインを理解する
タイムラインを活用してアニメーションのタイムフローを制御し、制御する方法を学びます。
最終結果
アニメーション化されたWebページイントロを直接作成します。
💾 受講環境と学習資料のご案内
- レッスンでは、オンラインベースのコードエディタであるCodePenを使用し、Windows / macOS環境の両方を学習できます。
- 学習資料はノッション文書として提供されます。 (セクション 0 - 環境設定クラスノート)
- 簡単なHTML、CSS、JavaScriptの基本を知っている必要があります。
Q&A 💬
Q. なぜGSAPを学ぶべきですか？
生産性が重要なWeb開発者にとって、純粋なJavaScriptだけでアニメーションを実装することはとても不合理で不要です。こういうときによく作られているツールを使うともっと便利でしょうか？釘を手で打つことなくハンマーを使うようなものです。
Q. GSAPを学ぶと何がいいですか？
アニメーションを分析する能力が生まれ、このように分析したアニメーションを非常に簡単に自分のプロジェクトに反映してみることができます。
Q. GSAPを学ぶことで何ができますか？
このクラスを受講してすぐにインタラクティブWebを作成することはできません。ただ基礎コアを固める授業なので、基本基をしっかり学ぶという考えで受講すれば役に立ちます:)
Q. 講義を聞く前に準備すべきことはありますか？
HTML、CSS、JavaScriptのプレイヤーの知識を学び、来るのは良いことです。よく知らなくても従うことはできますが、知って聞くと理解の幅がはるかに広がります。
Q. 授業内容をどのレベルまで扱いますか？
パート1はGSAP基礎クラスです。 GSAP基礎文法と機能に焦点を当てて講義を進めます。
こんな方に
おすすめです
学習対象は
誰でしょう？
Webにアニメーションを入れたい開発者
GSAPを正しく使用したい開発者
Webアニメが気になるデザイナー
前提知識、
必要でしょうか？
HTML
CSS
JavaScript
4,418
受講生
225
受講レビュー
292
回答
4.9
講座評価
5
講座
---안녕하세요 디자인과 개발에 재미를 가지고 강의를 만드는 범쌤입니다 🙂 -----------------------------------------------------온라인 / 오프라인 출강 문의는 seonbeom2@gmail.com 으로 연락주세요 🙇♂
カリキュラム
全体
27件 ∙ (3時間 55分)
講座資料（こうぎしりょう）:
授業資料
1. GSAPとは何ですか？
04:03
3. 環境構築
10:02
4. GSAP オブジェクト
13:25
5. 基礎トゥイーニング
12:00
7. 遅延と反復
04:53
8. 加速度
06:04
9. 多要素制御
07:02
10. ツインコントロール
06:14
11. from() トゥイーンの問題点
07:43
12. GSAP公式ドキュメントの活用
04:40
13. タイムラインが重要な理由
07:39
14. 基礎 タイムライン
07:50
16. 基礎タイムラインポジション
09:11
講座掲載日:
最終更新日:
受講レビュー
全体
61件
5.0
61件の受講レビュー
milktea受講レビュー 26
∙
平均評価 4.8
5
100% 受講後に作成I finished the course in half a day since the lecture was uploaded! I had studied GSAP a little bit before, so I know a little bit about the basic grammar and I had done some simple projects. That's why I think I finished the course quickly. Before Beom, there was no instructor who provided online lectures on GSAP in my native language, so I listened to Udemy and understood it step by step, so I think I understood a lot of the concepts I didn't understand this time. Let me give you my honest feedback. Part 1 is a really basic lecture! Since it focuses on grammar and concepts, there aren't many related in-depth toy projects. However, you can create endless examples based on the grammar you learned in Part 1. (Just like you can create various examples with Pure CSS, you can create them using GSAP.) The reason I'm saying this is because I want to tell you that if you feel a little disappointed because there are few examples, or if you feel that it's too easy because it only teaches grammar, please refer to it. Since I already know the basic grammar, I am waiting for a more in-depth lecture with a larger amount of toy projects. Even so, the reason I bought this lecture is because it feels like a GSAP native language dictionary to me, I bought it to keep it and take it out whenever I forget the grammar or method usage. I feel dizzy, so please upload all of Part 4 as soon as possible. ㅠ
- motep1326
受講レビュー 2
∙
平均評価 5.0
5
19% 受講後に作成Wow, the lecture I was looking for is here... There are only lectures on vanilla JavaScript on the market, and no GSAP lectures except for the tutorials released within GSAP, but this lecture is really like lightㅜ I was looking for an animation library that can produce output in practice, and it's so goodㅜ Thank you so much for giving me the lecture, and since I'm grateful, please release the next lecture. I hope you'll be blessed, instructorㅎㅎ
- hjux
受講レビュー 20
∙
平均評価 5.0
- euflynn
受講レビュー 4
∙
平均評価 5.0
5
100% 受講後に作成I often have interaction projects, so I searched on Google and used the codes from related blogs, but I missed a lot of the basics. 😂 It's organized as a Notion document, so it's definitely easy to understand visually👍 The feedback is really good. The lecture quality is great. The explanations are detailed and problems are caught in advance. A little disappointing thing is that it would be good if you could add a few more examples. I want to see how it can be applied in this way with various examples. ㅎㅎ When you make a lecture, it takes a lot of time to make a good lecture, but even if it's not a lecture, I want to review the lecture content and see the instructor's various sources by giving a link to Codepan. Of course, you can search for it by keyword on Codepan, but it's hard to find sources created only using lectures. It was a really helpful lecture!
- sun5322
受講レビュー 5
∙
平均評価 4.4
5
100% 受講後に作成While working, I found gsap in another site's code, and I wanted to study it, so I took the course! I was at a loss when looking at English sites, but there was a course that taught me from the basics like this! It's so great and has so many fun and diverse functions that I think the future of animation is gsap! I'm really looking forward to the next part~
￥5,280
kindtigerの他の講座
知識共有者の他の講座を見てみましょう！
似ている講座
同じ分野の他の講座を見てみましょう！
![Web Design Development Technician [2025] Complete Practical Course (KakaoTalk Q&A Available)강의 썸네일](https://cdn.inflearn.com/public/courses/332868/cover/3a2245ca-bb9f-414a-ba67-403cfcb2b7c9/332868.jpg?f=avif&w=420)
![[Fantasy Pig's Feet] From design to coding강의 썸네일](https://cdn.inflearn.com/public/courses/332845/cover/5d0ef569-50e5-4300-96ed-3205d526795b/332845.png?f=avif&w=420)