【GSAP】はじめてのアニメーション！to・from・fromToとeaseの使い分け

情報確認日：2026年10月15日。GSAP 3系の公式資料を確認して作成した、本サイト独自の実装例です。

GSAPで要素を動かすための基本を、ボタンから再生できるデモで説明します。開始値、終了値、秒数、イージング、再実行時の競合まで整理します。

GSAPが担当する範囲を先に決める

GSAPは、JavaScriptで指定した値を時間とともに変えるライブラリーです。HTMLを組み立てたり、レスポンシブな配置を自動で設計したりするものではありません。まずCSSで読みやすい静止状態を作り、その上へ必要な動きを加えると、問題の切り分けが簡単になります。

色が変わるだけのホバーならCSSのtransitionで十分な場合もあります。複数の動きをまとめて再生したい、途中から逆再生したい、スクロールと進行度を結び付けたい場合に、GSAPの制御が役立ちます。本記事では、クリックするたび同じ出発点から動く箱を作ります。

toは到着点、fromは出発点を指定する

gsap.to()は終了時の値を指定します。現在の位置からx: 200へ動かすなら、現在値の取得を自分で毎フレーム書く必要はありません。durationの単位は秒です。800ミリ秒を意図してduration: 800と書くと、非常に長い動きになるので注意します。

gsap.from()は指定した状態から、要素の元の状態へ動かします。CSSで完成状態を定義し、少し下から現れる見出しを作る用途などに向きます。ただし、初期状態の適用タイミングが見た目へ影響します。画面外や別のタブで作成しておき、ずっと後で再生する構成では、生成時の状態も確認してください。

gsap.fromTo()は開始値と終了値の両方を指定します。毎回同じ初期状態へ戻して再生する今回のデモに適しています。時間やeaseなどの設定は、第三引数となる終了側のオブジェクトへ置きます。toへ置き換えると、連打したときに現在位置から再び動くなど、出発点の扱いが変わります。

xとleftを同じ意味で扱わない

xはCSS transformの移動として扱われます。通常の文書内で要素が占める場所そのものを並べ替える設定ではありません。隣の要素を押しのけたいなら、レイアウト変更と見た目の移動を分けて考えます。leftやwidthを毎フレーム変える実装へ、無条件に置き換える必要はありません。

サンプルでは親の幅から箱の幅を引き、移動距離の上限を計算します。デスクトップで200px動けても、小さな画面では余白が足りない場合があるためです。paddingや複雑なborderがある親を使う場合は、実際に移動させたい内側の領域に合わせて計算を調整してください。

easeは速さの変化を決める

同じ距離とdurationでも、easeによって印象が変わります。power2.outは終点へ向けて減速する動きです。ease: "none"なら進み方が一定になります。移動する対象がボタンなのか、背景なのか、進捗表示なのかで、適切な変化は違います。

「滑らかだから」という理由だけで強いバウンドを付けると、操作の完了位置が分かりにくくなる場合があります。まず控えめなeaseで目的を満たし、必要なときに変化を強めます。見た目だけでなく、操作後にどこへ視線を導きたいかで選びましょう。

クリックのたびに処理を積み重ねない

今回のコードは直前のTweenを変数へ保持し、再生前にkill()します。開始点を固定するデモなので、途中からの再生継続より、同じ挙動を再現することを優先しています。現在位置を保って別の目標へ移動したいUIなら、to()とoverwriteの使い方を検討します。

kill()は、アニメーションが加えたスタイルをすべて元へ戻す命令ではありません。画面を破棄するときに元のCSSへ戻したいなら、revert()やgsap.context()で管理する設計が必要です。また、GSAPを停止しても、addEventListenerで登録したクリック処理は残ります。

動かさなくても分かる状態にする

デモはクリックした時点でprefers-reduced-motionを確認し、動きを減らす設定ならdurationを0にします。開始前に箱をdisplay: noneで隠したり、重要な文章を透明にしたりしていないため、スクリプトが失敗しても内容が消えません。

導入時は、読み込み順、対象セレクター、コンソールのエラー、クリック連打、小さな画面の順に確認してください。最初の一個が動く状態を作ってから対象を増やすと、GSAPの設定とページ固有の問題を区別しやすくなります。

実装例：HTML・CSS・JavaScript

以下は独立したデモ用のコードです。既存のViteなど、npmパッケージを解決できる開発環境で npm install gsap を実行し、HTMLをbody内、CSSをスタイルシート、JavaScriptをmain.jsへ配置してください。main.jsはHTMLの末尾からtype="module"で読み込みます。WordPressの記事本文へそのまま実行用スクリプトを貼る例ではありません。

<main class="demo">
  <div class="stage"><div class="box">GSAP</div></div>
  <button type="button" id="play">再生する</button>
  <p>四角が右へ移動して元の大きさになります。</p>
</main>

.demo { max-width: 40rem; margin: 3rem auto; padding: 1rem; }
.stage { padding: 2rem 0; overflow: hidden; }
.box { width: 5rem; height: 5rem; display: grid; place-items: center;
  border-radius: 1rem; background: #0ae448; color: #0e100f; }
button { padding: .7rem 1rem; }

import { gsap } from "gsap";
const box = document.querySelector(".box");
const button = document.querySelector("#play");
let current;
button.addEventListener("click", () => {
  current?.kill();
  const reduce = matchMedia("(prefers-reduced-motion: reduce)").matches;
  const distance = Math.min(200, Math.max(0,
    box.parentElement.clientWidth - box.offsetWidth));
  current = gsap.fromTo(box,
    { x: 0, scale: 0.85 },
    { x: distance, scale: 1, duration: reduce ? 0 : 0.8,
      ease: "power2.out", overwrite: "auto" }
  );
});

サンプルを確認するときの条件

APIの使い方は公式資料と照合しています。掲載コードはGSAP 3.15.0とDOMを模した環境で読み込み・操作を確認しましたが、実ブラウザーでの見た目、タッチ操作、描画性能を保証するものではありません。採用前に対象ブラウザーと実機で確認してください。JavaScriptを無効にした状態でも、必要な内容と操作が残るかを確認します。

参考資料

• GSAP公式：インストール
• GSAP公式：gsap.to()
• GSAP公式：Timelineと制御
• GSAP公式：アイキャッチに使用したブランドアセット