このレッスンをはじめる前に
このレッスンを進めるには前提知識が必要です。先に以下のレッスンを完了しておきましょう。
-
#01 箱を右に動かしてみよう (01:55) 無料公開中- 概要
- 学習環境の確認
- シンプルなアニメーション
-
#02 箱を上下左右に動かそう (02:52) 無料公開中- 上下左右のアニメーション
- delayによる課題
-
#03 timelineを設定してみよう (02:03) 無料公開中- gsap.timeline()の導入
- add()
- to()
- delayの削除
-
#04 timeline全体の挙動を設定してみよう (02:01)- repeat
- defaults
-
#05 要素を追加してみよう (01:42)- HTMLへの要素追加
- CSSでのスタイリング
- Timelineでの複数要素のアニメーション
-
#06 アニメーションのタイミングを制御しよう (02:36)- 数値によるタイミング指定
- <によるタイミング指定
-
#07 +=、-=でアニメーションを制御しよう (02:09)- +=によるタイミング指定
- -=によるタイミング指定
-
#08 画面全体を使ったアニメーションを作ろう (01:54)- アニメーションの分解
- xPercentによるスライドインの解説
-
#09 最初のパネルを設定してみよう (02:56)- HTMLとCSSの初期設定
- body, htmlの高さ設定
- .panel-1のスタイリング
-
#10 最初のパネルを動かしてみよう (02:55)- from()とxPercentによる実装
- .panelのスタイリング
- position: absoluteによる重ね合わせ
-
#11 もっとパネルを動かしてみよう (02:46)- .panel-2のスライドイン
- .panel-3のスライドイン
- .panel全体の移動
-
#12 最後にテキストを表示してみよう (02:09)- ヘッダーコンテンツの追加
- CSSでのスタイリング
- GSAPでのアニメーション設定
