gsap

非推奨です。公式の GSAP スキル（https://github.com/greensock/gsap-skills：gsap-core、gsap-timeline、gsap-scrolltrigger、gsap-plugins、gsap-react、gsap-utils、gsap-performance、gsap-frameworks）に置き換えられました。元の内容については、このリポジトリの履歴をご覧ください。

GSAP（GreenSock Animation Platform）

概要

GSAP は、CSS プロパティ、SVG、canvas、React コンポーネントなど、あらゆるものをアニメーション化できる、堅牢で非常に高速な JavaScript アニメーションライブラリです。最新のウェブパフォーマンスを念頭に設計されており、クロスブラウザーの不整合にも標準で対応しています。

コアコンポーネント：

• gsap.to()、gsap.from()、gsap.fromTo()：基本的なトゥイーン。
• Timeline：gsap.timeline() を使って複数のトゥイーンを連続させます。
• プラグイン：機能を追加します（例：スクロールアニメーション用の ScrollTrigger、FLIP アニメーション用の Flip）。

---

インストール

参考：GSAP ドキュメント、React ガイド

用途	パッケージ
コア	gsap
React / Next.js（推奨）	gsap、@gsap/react

パッケージマネージャーから追加してください（npm を参照）。GSAP は、クリーンアップとコンテキスト管理のための専用 React フック（useGSAP）を提供しています。

---

コアの使い方

基本的なトゥイーン

import gsap from "gsap";

// Animate to a state
gsap.to(".box", { x: 100, duration: 1, ease: "power2.inOut" });

// Animate from a state
gsap.from(".box", { opacity: 0, y: 50, duration: 1, stagger: 0.1 });

タイムライン

タイムラインは一連の動きを演出するのに最適です。

const tl = gsap.timeline({ repeat: -1, yoyo: true });

tl.to(".box1", { x: 100, duration: 1 })
  .to(".box2", { y: 50, duration: 0.5 }, "-=0.5") // Start 0.5s early
  .to(".box3", { rotation: 360 });

イージング

アニメーションの雰囲気をカスタマイズします。

• 標準：「none」、「power1」から「power4」、「back」、「bounce」、「circ」、「elastic」、「expo」、「sine」。
• .in、.out、.inOut を追加します（例：「power2.inOut」）。

---

React での使い方（useGSAP）

React（または Next.js）を使う場合は、標準の useEffect ではなく、必ず @gsap/react パッケージとその useGSAP フックを使用してください。クリーンアップを自動で処理し、メモリリークや Strict Mode での二重実行を防ぎます。

import { useRef } from "react";
import gsap from "gsap";
import { useGSAP } from "@gsap/react";

gsap.registerPlugin(useGSAP);

export default function App() {
  const container = useRef<HTMLDivElement>(null);

  useGSAP(() => {
    // gsap code here...
    // All animations created here are automatically reverted on cleanup!
    gsap.to(".box", { x: 360, duration: 2 });
  }, { scope: container }); // Scope allows selecting elements only inside this container

  return (
    <div ref={container}>
      <div className="box">Box</div>
    </div>
  );
}

---

人気のプラグイン

プラグインは GSAP のコア機能を拡張します。使用する前に登録する必要があります。

ScrollTrigger

スクロールに合わせた要素のアニメーション、セクションのピン留め、スクロールバーと連動したアニメーションを実現します。

import gsap from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";

gsap.registerPlugin(ScrollTrigger);

gsap.to(".box", {
  scrollTrigger: {
    trigger: ".box",
    start: "top center", // When top of element hits center of viewport
    end: "bottom top", 
    scrub: true, // Tie animation strictly to scrollbar
    pin: true,
  },
  x: 500,
});

その他の注目プラグイン：

• Flip：状態やレイアウトが変わる要素を滑らかにアニメーション化します。
• Observer：意図に基づくインタラクション向けに、イベント（スクロール、タッチ、ポインター）を正規化します。
• Draggable：要素をドラッグ、回転、または投げられるようにします。
• SplitText：HTML テキストを文字、単語、行に分割し、細やかなアニメーションを可能にします（プレミアム）。
• DrawSVG：SVG の線を直感的にアニメーション化します（プレミアム）。
• MorphSVG：任意の SVG パスを別のパスに変形させます（プレミアム）。

---

よくあるパターンとベストプラクティス

• 登録：プラグインは常に事前に登録してください（例：gsap.registerPlugin(ScrollTrigger, useGSAP)）。
• React Strict Mode：React 18 の Strict Mode で useEffect が二重に呼び出されてアニメーションが重複して作成されるのを防ぐため、useGSAP() を使用してください。
• 変換：パフォーマンスと精度を高めるため、標準の transform や opacity の文字列ではなく、GSAP のショートカット（x、y、rotation、scale、autoAlpha）を使用してください。
• FOUC（スタイル未適用コンテンツの一瞬の表示）：初回読み込み時のアニメーションでは、CSS で要素を非表示にし（display: none ではなく visibility: hidden）、gsap.from() または gsap.set(..., { autoAlpha: 0 }) を使用してください。

---

追加リソース

• reference.md — 公式 GSAP ドキュメント、コア API、プラグイン、React 連携 — インデックス可能
• 公式ドキュメント：https://gsap.com/docs/v3/
• React ガイド：https://gsap.com/resources/React
• ScrollTrigger：https://gsap.com/docs/v3/Plugins/ScrollTrigger