このレッスンをはじめる前に
このレッスンを進めるには前提知識が必要です。先に以下のレッスンを完了しておきましょう。
-
#01 GSAPを使っていこう (01:13) 無料公開中- 概要
- アウトライン
- JavaScriptに関する注意点
-
#02 学習の準備を整えよう (02:32) 無料公開中- 作業用フォルダの設定
- index.htmlの作成
- style.cssの作成
- ブラウザでの確認
-
#03 GSAPを使えるようにしよう (01:58) 無料公開中- GSAPのスクリプト読み込み
- main.jsの作成
-
#04 簡単なアニメーションを実装しよう (02:40)- divの設置
- スタイリング
- gsap.to()
-
#05 より複雑なアニメーションを実装しよう (02:31)- duration
- scale
- rotation
- スタイルの変更
-
#06 アニメーションのタイミングを操作しよう (01:58)- repeat
- yoyo
- delay
- repeatDelay
-
#07 動きに変化をつけてみよう (02:20)- ease: 'none'
- ease: 'bounce'
- ease: 'elastic'
- ease: 'steps(5)'
-
#08 複数の要素を動かしてみよう (02:04)- divの追加
- stagger
-
#09 gsap.from()で動かす前の状態を定義しよう (01:46)- divの設定
- フレックスボックスの設定
- gsap.from()
-
#10 ヘッダーメニューを作ってみよう (01:56)- ヘッダーメニューの設置
- スタイリング
-
#11 ヘッダーメニューに動きをつけてみよう (01:53)- h1のアニメーション
- liのアニメーション
