📖

GSAP個人的「こんなこともできるの」シリーズ

2022/08/23に公開

GSAPってこんなのもtweenできるんだ〜という最近の気づきをまとめた個人用メモのようなものです。「こんなこともできるのか〜」と思うたびに項目を増やし、感動する予定です。

前提

雑に検証するために、よくあるスクロールで固定するレイアウトを使います。(下方向にスクロール)

お手持ちのローカル環境で、下記のコードを貼り付ければ挙動自体は確認できると思います。

属性値をtween

SVGのd属性をトゥイーンさせることでパスをアニメーションさせたい時に使います。SVGは元々アニメーションの能力を持っていますが、イージングの設定が割と大変なのでGSAPを経由したほうが楽だなと感じています。

HTML

<main style="padding:200vh 0;">
  <div class="area-fixed">
    <div class="item-fixed" test1="1" test2="1">固定</div>
  </div>
</main>

SCSS

.area-fixed {
  height: 100vh;
  background-color: green;
  .item-fixed {
    color: #fff;
    font-size: 6rem;
  }
}

JavaScript

// scrollTrigger
gsap.to(".item-fixed", {
  attr: { test1: "100" }, // 属性値をトゥイーン
  scrollTrigger: {
    trigger: ".area-fixed",
    start: "top top",
    end: "+=900",
    pin: true,
    scrub: true,
    markers: true,
  },
});
 
// Timeline
const timeline = gsap.timeline();
timeline.repeat(-1);
timeline.set(".item-fixed", { attr: { test2: "0" } }, 0);
timeline.to(".item-fixed", { attr: { test2: "100" }, duration: 2 }, 0); // 属性値をトゥイーン

オブジェクトの値をtween

JavaScriptで、tweenさせたい値がCSSプロパティではない場合などに、変化させたい値をオブジェクトに格納して変化させるという方法を使うことがあります。

HTML

<main style="padding:200vh 0;">
  <div class="area-fixed">
    <div class="item-fixed" test1="1" test2="1">固定</div>
  </div>
</main>

SCSS

.area-fixed {
  height: 100vh;
  background-color: green;
  .item-fixed {
    color: #fff;
    font-size: 6rem;
  }
}

JavaScript

const databox = {
  test1: 0,
  test2: 0,
};
// scrollTrigger
gsap.to(databox, {
  test1: 100,
  scrollTrigger: {
    trigger: ".area-fixed",
    start: "top top",
    end: "+=900",
    pin: true,
    scrub: true,
    markers: true,
  },
});
 
// Timeline
const timeline = gsap.timeline();
timeline.repeat(-1);
timeline.set(databox, { test2: 0 }, 0);
timeline.to(databox, { test2: 100, duration: 7, ease: Cubic.easeInOut });
 
function check() {
  console.log(databox.test1, databox.test2);
  requestAnimationFrame(check);
}
 
check();

アニメーションのタイミングをハンドル

開始した場合、進行中の場合、終了した場合などで追加処理を行うことができます。「アニメーション進行中はアニメーションを再発火させない」ためのフラグを管理するのに使ったりなど

HTML

<main style="height:100vh;">
  <p class="target">GSAP</p>
</main>

JavaScript

function tween() {
  gsap.to(".target", {
    x: 100,
    duration: 2,
    repeat: 3,
    yoyo: true,
    onComplete: () => {
      console.log("tween完了");
    },
    onStart: () => {
      console.log("tween開始");
    },
    onUpdate: () => {
      console.log("tween進行中");
    },
    onRepeat: () => {
      console.log("tweenリピート開始");
    },
  });
}
 
function timeline() {
  const animation = gsap.timeline({
    onComplete: () => {
      console.log("timeline完了");
    },
    onStart: () => {
      console.log("timeline開始");
    },
    onUpdate: () => {
      console.log("timeline進行中");
    },
    onRepeat: () => {
      console.log("timelineリピート開始");
    },
  });
  animation.repeat(3);
  animation.set(".target", { y: 0 }, 0);
  animation.to(".target", { y: 100, duration: 2, ease: Cubic.easeInOut }, 0);
}
 
tween();
timeline();

Discussion