Gsap : 基礎

docs : https://gsap.com/docs/v3/Installation
CDN : <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.4/gsap.min.js"></script>
npm : npm install gsap
nexjtjs : import Gsap from 'gsap';

基本的な使い方

メインメソッドはtoとfrom

gsap.from()

gsap.to()

例① :

gsap.from(".header",{duration: 1 , y: "-100%"} )

意味 : headerクラスが１秒かけて上から下へ

fromの中の “引数” がreturn内 (react) のクラス名とリンクしている（=動かしたい部分）

例②:

gsap.to(".buttons", {
  duration: 2,
  stagger: 1,
  rotation: 360,
  x: 150,
});

意味：1秒かけて１秒ごとに360度回転 & X方向に150px

stagger は順番通りに行われ1セットで終了することを意味
xはtranslateXを意味

fromTo

gsap.fromTo(
  ".box4",
  { opacity: 0.1, scale: 0 },
  { opacity: 1, duration: 2, scale: 1.1, color: "red" }
);

{はじめ } と {おわり }

timeline()

順番にアニメーションが行われる1連のセット

let timeline = gsap.timeline();

let timeline = gsap.timeline();

timeline
  .to(".boxes1", { duration: 1, y: 200 })
  .to(".boxes2", { duration: 1, x: 200 })
  .to(".boxes3", { duration: 1, x: 300 });

頻度が高そうなもの

ブログカードの表示

gsap.set(".posts li", { y: 30, opacity: 0.4 });
gsap.to(".posts li", {
  duration: 1,
  y: 0,
  opacity: 1,
  stagger: 0.2, // アイテムごとの遅延
  ease: "power2.out" // イージングの設定
});

li をそれぞれ遅延させて表示させる

reactで使う場合：


"use client"

useEffect(() => {
    gsap.set(".cards", { y: 30, opacity: 0.4 });
    gsap.to(".cards", {
      duration: 2,
      y: 0,
      opacity: 1,
      stagger: 0.2, // アイテムごとの遅延
      ease: "power2.out", // イージングの設定
    });
  }, []);

ease

実行終了まで継続するモーション

https://gsap.com/docs/v3/Eases/

.to(".boxes1", { duration: 1, y: 200 , ease: "bounce"})

上記は終了時点で跳ねる感じになる

← Go home