本記事から本格的にGSAPを使ってアニメーションを作っていきます。前の記事でもお伝えしましたが、このブログはUdemyの教材をもとにGSAPについて解説しています。GreenSock」です。▼2時間30分の講座でGSAPの基本から応用までカバーされており、1日で自由にアニメーションを作れるようになります。▼SALE!詳細はこちらこの記事は上記のUdemy内で説明がなかったり、個人的に疑問に思った部分を調べて解説しているのでUdemyをメインで使い、不明点が出てきたらサポート教材としてこのブログを使うと抜け漏れなく学べるように作っています。この記事ではGSAPを理解するために基本をまとめているのでこの記事だけでもアニメーションの実装はできるようになります。本記事を理解することで下記のようなアニメーションを実装することができます。(※Udemy講座の内容になります)前回の記事でGSAP全体の特徴や概要を説明していますのでまずはそちらを読んでもらえると理解もスムーズかと思います。続きを見る💡プロフィール💡Yamatoと言います。7年ほどフロントエンドをやっています。HTML/CSSはもちろんJS・Vue・WordPress構築・Shopifyの実装をしています。2022年8月から独立しフリーランスで活動しています。前職の上場企業でのマネージャー経験もあり未経験メンバー育成もしていました。実装を開始する前にHTML、CSS、JavaScriptをそれぞれ準備します。ファイル構成は全ファイルが下記のように同一の階層になるようにします。HTMLとCSSそれぞれ下記のコードをコピペしてください。red;}下図のような表示になると思います。これでべースは完成です。GSAPを導入するGSAPを使用するためにまずは公式サイトからCDNでソースを読み込みます。上記のページに遷移したら図の1、2の順番でリンクをコピーします。先ほど作ったHTMLの15行目のapp.scriptの読み込みより上に記述します。</body></html>これで全ての準備が整いました。次から実際にアニメーションを作っていきましょう!gsap.toとgsap.fromgsapオブジェクトで作るTween(アニメーション)の基本が次の2つです。gsap.togsap.fromgsap.fromToもあるのですが、こちらはあまり使わないので、今回は説明を省略します。gsap.toは"指定した状態に"アニメーションするまずはgsap.toの説明からしていきます。//←動かしたい要素を指定しています。1,});上記のように記述してページをリロードすると、四角の要素が右に移動します。1」はアニメーションに何秒かけるかを指定しています。今回だと「1秒間かけて右に200px移動する」という意味です。デモページで確認gsap.fromは"指定した状態から"アニメーションする次にgsap.fromです。//←動かしたい要素を指定しています。1,});このように記述をすることで、右に200pxの位置からもとの位置に戻ってきます。今はxを指定して横方向の移動ですが、xをyに変更すると縦方向のアニメーションに変わります。デモページで確認これらがGSAPでアニメーションを実装する超基本部分です。イージングの機能が備わっています。イージングとはアニメーション中の動きに変化をつけることです。指定方法は簡単で、公式ページでデモを見ながら決められます。こちらにアクセス(公式ページに遷移します)右側の気になるイージングを1選択し、下の値を2コピペします。今回はわかりやすイージングのbounceを指定したいと思います。これを追記});デモページで確認コピペで完結なので簡単ですね!フェードアウト・フェードインフェードアウト・フェードインのアニメーションはautoAlphaというプロパティを使います。autoAlphaはCSSのopacityとvisibilityの両方をコントロールしてくれます。hidden」が設定されました。0,});gsap.toをgsap.fromに変更しました。inherit;」にアニメーションされます。見えない状態から見える状態にアニメーションされるということです。フェードインの実装時には注意が必要です。いうのも今のJavaScriptファイルは記述量が少なく処理も少ないので、ほぼ問題なくフェードインが綺麗に見えますが、少し処理を増やすとフェードインが綺麗に見えなくなってしまいます。次のデモを見て何度かリロードしてみください。デモページで確認リロードのたびに緑の要素が少し残り、そしてフェードインが始まります。実はgsapの前にfor文を入れてある処理をさせているのです。3,});for文で0〜4000までをカウントさせているだけです。これだけでフェードインにチラつきが発生してしまいます。フェードインでチラつきが起こるのか?理由は2つあります。inherit;」になる2ソースが読み込まれる順番は基本的にHTML→CSS→JSの順になる詳しく説明します。HTML、CSSが読み込まれページが表示されます。inherit;」の状態なので対象要素はユーザーには見えている状態です。次にJSファイルが読み込まれ、for文の4000のカウントが始まります。inherit;」にアニメーションされます。inherit;」の状態になっているのです。これがチラつきの正体です。hidden;」を設定します。hidden;」だけで要素が見えなくなるので、opacityの設定は不要です。追加}これでリロードしてもチラつきがなくなります。下のデモページで確認しましょう。デモページで確認(チラつき無し)stagger:グループ内の要素を順番に動かす次はあるグループを作ってその中で順番にアニメーションをさせてみましょう。今回は四角と丸の要素を順番にフェードインさせます。hidden;」を指定します。追加}次にgsapにstaggerプロパティを追加します。},});stagger内にeachを設定することでアニメーションが発生する間隔を指定しています。この記述だと「1秒間隔で発生」させています。今は左から順番にアニメーションしていますが、アニメーションのスタート位置も調整できるので詳しくはこちらをチェックしてください。要素を連続して動かす一つの要素を「右に100px移動させ、次に下に100px移動させ、また右に100px移動させる」ような連続したアニメーションを設定する方法です。コメントアウト}次にapp.jsを触ります。「右に100px移動させ、次に下に100px移動させ、また右に100px移動させる」動きなので下記のように記述します。});しかしこれだと一気に斜めにアニメーションしてしまいます。デモページで確認keyframes連続したアニメーションを作る時はkeyframesを使い配列の中に、アニメーション内容を上から順番に記述します。],});デモページで確認トリガーとコールバックGSAPではTweenの中にトリガーとコールバックを設定できます。・onRepeat:リピート開始時です。下記のコードでは1回のリピートが発生するように記載しています。console.log('リピート開始'),});イベントの発火タイミングを動画で見てみましょう。デモページで確認Tween(アニメーションの塊)の保存Tweenは保存することができます。保存にはregisterEffect()メソッド、使用時にはgsap.effectsオブジェクト下記のコードでは2秒後に保存したアニメーションが動き出すように記述しています。複雑そうに見えますが、一行一行見れば理解できます。2000);デモページで確認Tweenを変数に保存Tweenは変数にも保存可能です。true」を忘れないことです。これを忘れてしまうと、変数に保存されたアニメーションでも変数が読み込まれたタイミングでアニメーションが開始されてしまいます。5行目のplay()メソッドはpausedで止められていたアニメーションを開始させるメソッドです。デモページで確認GSAPのメソッドを上手に繋げて使えば、アニメーション時間や開始時間の遅延の調整もできます。2000);使えるメソッドはたくさんあるので、こちらをチェックしてください。まとめ本記事はGSAPの基本となる部分を解説しました。次は複数の要素と連動させたアニメーションを作るTimelineについて解説します。コメントをキャンセルメールアドレスが公開されることはありません。*サイト上に表示された文字を入力してください。スキルアップnewとインスタンスの関係newとインスタンスについて自分なりに理解した流れを書きます。first-child・nth-of-type...兄弟要素で最初の要素、n番目の要素を指定できる頻出擬似クラス6つ<後編>今回はセレクタ解説の後編です。3/4】Timelineを使って複数の要素を連動させるアニメーションフロントエンドエンジニアYamato(やまと)7年目のフロントエンドです。サンフランシスコ留学の際にITの素晴らしさに触れエンジニアになると決心。独学で未経験からアルバイトで採用され入社。経験し2022年8月に独立しました。HTML/CSS・JS・WordPress・Shopifyを触っています。YAMATOdevlog。