Zenn
🦸‍♂️

【GSAP】タイムライン機能の使い方的な【ほぼ備忘録】

に公開
アニメーション
GSAP
tech

はじめに

ほぼ備忘録に近いです・・・

【本記事の対象】

  • ある程度CSSアニメーションを扱える人、扱いたい人
  • Gsapを使用したことがある人、Gsapに興味がある人
  • 時間差によって複数のアニメーションが動く処理を簡単に作成したい人

GSAP：https://gsap.com/

GSAPのタイムライン機能を使いこなそう

Webアニメーションの世界では、GreenSock Animation Platform（GSAP）が強力なツールとして知られています。特に、GSAPのタイムライン機能は、複雑な連続アニメーションを簡単に作成できる優れた機能です。本記事では、GSAPのタイムライン機能の使い方と、それがどのようにCSSアニメーションやjQueryと異なるかを解説します。

GSAPの特徴

GSAPは、以下の点でCSSアニメーションやjQueryと異なります：

  1. パフォーマンス: GSAPは最適化されており、特に複雑なアニメーションでCSSやjQueryよりも高速です。
  2. 柔軟性: タイムライン機能により、複数のアニメーションを簡単に制御できます。
  3. クロスブラウザ対応: ブラウザの互換性の問題を心配する必要がありません。
  4. イージング関数: 豊富なイージング関数が組み込まれています。
  5. 精密な制御: アニメーションの一時停止、再開、逆再生などが可能です。

GSAPの導入

https://gsap.com/docs/v3/GSAP/
GSAPを使用するには、まずプロジェクトにライブラリを追加する必要があります。npmを使用してインストールする場合は、以下のコマンドをターミナルで実行します

npm install gsap

インストール後、JavaScriptファイルでGSAPをインポートして使用できます

import { gsap } from "gsap";

GSAPの基本的な使い方

GSAPの基本的なコードの書き方

GSAPの基本的なコードの書き方をまずは理解してみましょ！
GSAPはある程度CSSアニメーションを扱えるのであれば、書き方を覚えこもうとしなくてもすんなり入るかもです。

gsap.to(".box", {duration: 2, x: 300, rotation: 360});

このコードは、.boxクラスを持つ要素を2秒かけて300px右に移動させ、同時に360度回転させます。
ほぼCSSアニメーションですね

GSAPのコードレシピ

GSAPのアニメーションでよく登場するのはこの辺になりそうです。
コードからある程度どんな動きがかかるかをイメージできると1000点満点ですね（意味不明）

  1. フェードイン
gsap.from(".element", {opacity: 0, duration: 1});
  1. バウンス効果
gsap.to(".element", {y: -50, duration: 0.5, ease: "bounce.out", repeat: -1, yoyo: true});
  1. スケールアップ
gsap.to(".element", {scale: 1.5, duration: 1});

GSAPのタイムラインの使い方

GSAPのタイムライン機能は、複数のアニメーションを簡単に順序付けし、制御することができます。
タイムライン機能は大変重宝されます。CSSでもアニメーションのタイムライン機能があるらしいですが、一部のモダンブラウザしか使えないのでアクセシビリティの鬼としては許せません。

タイムラインの基本

let tl = gsap.timeline();

tl.to(".box1", {duration: 1, x: 100})
  .to(".box2", {duration: 1, y: 50})
  .to(".box3", {duration: 1, rotation: 360});

let tl = gsap.timeline()では空のタイムラインツリーが出来上がります
そのタイムラインにアニメーションを追加しているイメージです

gsap.timeline()で定義されたタイムラインは使い回しができ、さらには情報を引き継ぎます
途中で止めたり、条件に応じてアニメーションを追加したりなどの柔軟な制御が可能です

純粋にアニメーションを重ねるだけでなく、より高度な使い方を次で解説します

タイムラインの高度な使い方

  1. 同時アニメーション
let tl = gsap.timeline();

tl.to(".box1", {duration: 1, x: 100})
  .to(".box2", {duration: 1, y: 50}, "<") // "<"は直前のアニメーションと同時に開始
  .to(".box3", {duration: 1, rotation: 360});
  1. 遅延の追加
let tl = gsap.timeline();

tl.to(".box1", {duration: 1, x: 100})
  .to(".box2", {duration: 1, y: 50}, "+=0.5") // 0.5秒の遅延後に開始
  .to(".box3", {duration: 1, rotation: 360});
  1. ラベルの使用
let tl = gsap.timeline();

tl.to(".box1", {duration: 1, x: 100})
  .addLabel("middle")
  .to(".box2", {duration: 1, y: 50})
  .to(".box3", {duration: 1, rotation: 360}, "middle+=0.5");

以上のように、ただrotateやscale・x/yで移動させるだけでなく遅延や開始位置の調整、ラベルの書き換えも行えます。

もっと深層にたどり着くとタイムラインに関数() => {}を用いた処理も追加できます。
処理に応じてDOMを書き換えることも容易くできます
GSAPって最強っすよね！！！！！！！！！

まとめ

GSAPのタイムライン機能は、Webアニメーションの制作を大幅に簡素化します。複数の要素を正確にアニメーション化し、複雑なシーケンスを作成することができます。CSSアニメーションやjQueryと比較して、GSAPは高いパフォーマンス、優れた柔軟性、そして直感的なAPIを提供します。

GSAPを使いこなすことで、より魅力的でUXに優れたWebサイトを作成できます！

※添削はCalude.aiによって行われています。
　かなり短縮されたのでもっとデモ画面を元にコードの説明をしたい＞＜

Discussion