GSAPとは

GSAPは、ブラウザ上で高性能なアニメーションを作るJavaScriptライブラリです。CSSプロパティやSVGなどを細かく制御できます。

このLessonのゴール

• GSAPがどのようなアニメーションライブラリか説明できる
• GSAPを読み込み、対象要素を指定できる
• gsap.to()で移動時間とイージングを設定したアニメーションを作れる

npm install gsap

import { gsap } from "gsap";

gsap.to(".box", {
  x: 200,
  duration: 1,
  ease: "power2.out",
});

to は現在の状態から指定値へ動かします。durationは秒単位の時間、easeは速度変化です。

アニメーションは情報理解を助けるために使い、操作を待たせる長い演出は避けましょう。

実際に試してみよう

四角形を1秒かけて右へ200px移動させてください。