
デザインシステム with ピグマ
kindtiger
この講義を通してデザインシステムを構築し、私のデザインワークが持つ爆発的な相乗効果を感じてください。
초급
Figma, Figma Tokens, Design System
GSAPを使用すると、インタラクティブWeb開発に一歩近づくことができ、アニメーションの視点が変わります。

GSAPの使い方
アニメーションの理解
Webの理解
HTML構造
GSAPプラグイン
コアをつかむGSAP!
インタラクティブウェブ、はるかに簡単で便利です🌠
GSAPを使用して作成したBridgeクローンコーディングページ。 (リンク)
インタラクティブウェブに興味をお持ちですか? JavaScriptを使って素晴らしいWebアニメーションを実装したいですか?デザインと開発、両方の楽しみを見逃すことはできませんか? GSAPはまさにそのような人のための画期的なプラットフォームです。
GreenSockによって作成されたGSAPは、フロントエンド開発者、UIデザイナーなどがJavaScriptで簡単かつ便利にアニメーションを作成できるアニメーションプラットフォームです。
✅インタラクティブウェブに興味があればOK!
✅ HTML、CSS&JavaScriptを書くことを知っている誰でも!
ところで…GSAPのあまりにも強力な魅力にもかかわらず、いざGSAPを書こうと思うのは容易ではありません。
まさにきちんとしたハングル文書や学習資料を見つけるのが難しいからです。
しかし同時に、GSAPはユーザーの便宜のためにさまざまな機能を提供しています。
そのため、コア機能だけを正しく習得すれば、誰でも簡単に活用できるようになります。
この講義を通して、多くの人がGSAPとインタラクティブなWeb開発の魅力に夢中になることを願っています!
基本を丈夫に
コア機能を理解しやすいように
パートごとに一つ一つ分けて説明します。
(Tween、Timeline、Keyframe...)
実習も自信を持って
講義を終えた後に実習してみることができる
環境と課題を提供します。
(ノッション環境文書およびタイムライン資料)
初心者でも心配なく
HTML/CSS + JS基礎だけを知っても
十分に学習できます。
(CSS、JSを深く知ればさらに良いです!)
💡 GSAPを学んだら?アニメを見る視点が変わります!
かつては「わ~きれい」くらいだけ見て感じたウェブアニメの原理が見えます。講義を聞いたら、同じアニメーションを見ても「どんなメソッドにどんな属性を使ったのか、それぞれのディレイ時間は何秒ぐらいだろうか」までも十分考えて、直接実装できるようになります。

GSAPはGreenSockによって作成されたアニメーションプラットフォームで、JavaScriptで制御できるすべての要素にアニメーションを適用できます。 (CSSプロパティ、SVG、React、Canvas、Normal Objectなど...)また、多数のブラウザのクロスブラウジングをサポートし、jQueryに比べて最大20倍の高速パフォーマンスを提供します。

GSAP オブジェクトが持っている Property と Method を GreenSock 公式ドキュメントを直接確認しながら学習します。

基本的なアニメーションが適用される原理を学習し、Tweenを使って簡単なアニメーションを直接構成します。

タイムラインを活用してアニメーションのタイムフローを制御し、制御する方法を学びます。

アニメーション化されたWebページイントロを直接作成します。
💾 受講環境と学習資料のご案内
Q. なぜGSAPを学ぶべきですか?
生産性が重要なWeb開発者にとって、純粋なJavaScriptだけでアニメーションを実装することはとても不合理で不要です。こういうときによく作られているツールを使うともっと便利でしょうか?釘を手で打つことなくハンマーを使うようなものです。
Q. GSAPを学ぶと何がいいですか?
アニメーションを分析する能力が生まれ、このように分析したアニメーションを非常に簡単に自分のプロジェクトに反映してみることができます。
Q. GSAPを学ぶことで何ができますか?
このクラスを受講してすぐにインタラクティブWebを作成することはできません。ただ基礎コアを固める授業なので、基本基をしっかり学ぶという考えで受講すれば役に立ちます:)
Q. 講義を聞く前に準備すべきことはありますか?
HTML、CSS、JavaScriptのプレイヤーの知識を学び、来るのは良いことです。よく知らなくても従うことはできますが、知って聞くと理解の幅がはるかに広がります。
Q. 授業内容をどのレベルまで扱いますか?
パート1はGSAP基礎クラスです。 GSAP基礎文法と機能に焦点を当てて講義を進めます。
学習対象は
誰でしょう?
Webにアニメーションを入れたい開発者
GSAPを正しく使用したい開発者
Webアニメが気になるデザイナー
前提知識、
必要でしょうか?
HTML
CSS
JavaScript
4,483
受講生
234
受講レビュー
300
回答
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
全体
64件
5.0
64件の受講レビュー
受講レビュー 26
∙
平均評価 4.8
5
川の上がってから半日で頑張りました! 私は既存のGSAPについて少し勉強していた人なので、基本文法は少し知っています。 簡単なプロジェクトもやってみました。 バンサム以前は、GSAPのオンライン講義を母国語で提供する講師がいなかったため ユデミーで知って知って大体理解して聞いたので、今回理解できなかった概念をたくさん理解したようです。 率直な私のフィードバックを残す パート1講義は本当に基礎講義です! 関連する深化トイプロジェクトはあまりありません。 しかし、パート1で学んだ文法に基づいて無関心な例を作ることができます。 (Pure CSSでさまざまな例を作成できるように、GSAPを使用して作成できます。) 私がなぜこのような話をするのか、もしかしたら例が少なくて少し残念だったり、 文法だけを教えてくれるので、とても簡単だと感じられる方は参考にしてもらいたいです。 私はすでに基本的な文法を知っているので 私はトイプロジェクトの量が少し深刻な講義を待っています。 それでも私はこの講義を買った理由は私にはこの講義がGSAP母語辞書のような感じで 所蔵しながら文法やメソッドの使い方を忘れるたびに取り出そうと買いました。 めまいだからパート4まで一日でも早く全部上げてくださいㅠ
受講レビュー 2
∙
平均評価 5.0
受講レビュー 21
∙
平均評価 5.0
受講レビュー 4
∙
平均評価 5.0
5
しばしばインタラクションプロジェクトがあってGoogleに検索して関連ブログにあるコードレポートをインポートして使ってみましたが、私が基本的な内容をたくさん見逃していましたね😂 ノッション文書でまとめられているので、確実に視覚的に理解することをお勧めします👍 フィードバックはレッスンカリティはあまりにも良い説明も詳しく教えてくれ、問題が生じる点もあらかじめキャッチしてくれます。 ちょっと残念なことは、例をいくつか追加していただければいいと思います。 講義を作るときに良い講義を作るのに時間がかかりますが、例のソースは講義でなくてもコードファンでリンクをいただき、講義内容の復習兼講師様の様々なソースを見たいと思います。活用して作ったソースを見つけるのは難しいですね 本当に役立つ講義でした!
受講レビュー 5
∙
平均評価 4.4
期間限定セール、あと8日日で終了
¥30,800
30%
¥5,541
知識共有者の他の講座を見てみましょう!
同じ分野の他の講座を見てみましょう!