すぐにマスター！GSAP v3で魔法のようなウェブアニメーション作り

Getting Started with GSAP v3:A step-to-step guide

記事は上記記事を意訳したものです。

※当ブログでの翻訳記事は元サイト様に許可を得て掲載しています。

ウェブサイトに息吹を与える見事なアニメーションに魅了されたことはありませんか？そうであれば、GSAP (GreenSock Animation Platform) は、ウェブ上で魅力的な動きを作り出すための完璧なツールです！

GSAPは、初心者からプロまで、アニメーション作成を簡単にする強力なJavaScriptライブラリです。

GSAPは以下のことを可能にします： - HTML要素をアニメーション化 - CSSプロパティを操作 - 複雑な動きを簡単に制御

このガイドでは、GSAPの基本的なツールの設定と使用方法を説明します。

はじめに
トゥイーンを理解する
タイムラインを理解する
- タイムラインの作成
最後に

はじめに

コーディングを始める前に、HTMLファイルにGSAPライブラリを追加する必要があります。そのためには、GSAPのCDNリンクを取得する必要があります。

以下のスクリプトタグをHTMLに追加します：

<script
      src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.4/gsap.min.js"
      integrity="sha512-EZI2cBcGPnmR89wTgVnN3602Yyi7muWo8y1B3a8WmIv1J9tYG+udH4LvmYjLiGp37yHB7FfaPBo8ly178m9g4Q=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    ></script> 
    <script src="script.js"></script>

注意: GSAPのスクリプトタグは、ローカルのJSファイルのスクリプトタグの前に配置することが重要です。これにより、ローカルファイルがGSAPライブラリとその機能にアクセスできるようになります。同様に、プラグインを含むスクリプトタグは、GSAPスクリプトタグの後に配置する必要があります。

オンライン開発環境（CodePenなど）を使用している場合は、ペンの設定を編集してGSAPをインストールできます。

トゥイーンを理解する

トゥイーンは、GSAPの基本的なアニメーション関数です。任意のHTML要素をアニメーション化するには、以下を定義する必要があります： - アニメーション対象の要素 - アニメーションするプロパティ - アニメーションの継続時間 - アニメーションのイージング - 遅延時間などのその他のパラメータ

トゥイーンを作成するメソッド（これらのメソッドはすべてトゥイーンインスタンスを返します）： - gsap.to() - gsap.from() - gsap.fromTo()

簡単な例を見てみましょう：

gsap.to(".green", {rotation: 360, x: 100, duration: 1});

この例を詳しく見てみましょう：

gsapオブジェクトは、GSAPライブラリの機能にアクセスするためのエントリーポイントです。
.toメソッドは、オブジェクトを元の状態から最終状態にアニメーション化することを示します。
.greenセレクターは、アニメーション対象の要素を指定します。
rotationとxは、アニメーション化するプロパティです（CSSのケバブケースではなく、キャメルケースを使用）。
duration: 1は、アニメーションが1秒間続くことを示します。

トゥイーンはオン・オフのアニメーションに最適です。詳細なパラメータやメソッドについては、GSAPのドキュメントをご覧ください。

タイムラインを理解する

タイムラインは、アニメーションを順次または同時に含むことができます。遅延を追加するよりも、複数のアニメーションをシーケンス化するのに便利です。After Effectsのようなアニメーションソフトウェアを使用したことがある方には馴染みがあるかもしれません。

タイムラインの作成

タイムラインを呼び出すには、まずJSファイルで変数を宣言します：

var tl = gsap.timeline();

簡単な例を見てみましょう：

var tl = gsap.timeline();
tl.to(".green", {rotation: 360, x: 100, duration: 1})
  .to(".purple", {rotation: -360, x: -100, duration: 1}) 
  .fromTo(".blue", {x: -100},{rotation: 360, x: 100, duration: 1});

この例では、各要素が前の要素のアニメーション後に順番にアニメーション化されます。

複数の要素をタイムラインでアニメーション化する別の例：

var tl = gsap.timeline();
tl.to(".green", {rotation: 360, x: 100, duration: 1})
  .to(".purple", {rotation: -360, x: -100, duration: 1}) 
  .fromTo(".blue", {x: -100},{rotation: 360, x: 100, duration: 1})
  .from(".circle",{
    opacity: 0,
  });