gsap.fromメソッドとfromToメソッドの違い

2021年8月14日gsap

gsap.fromメソッドとfromToメソッドの違いを紹介します。

gsap.fromメソッドとfromToメソッドの違い

from()メソッドは、デフォルトに向かって変化し、
fromTo()メソッドは、変化前と変化後の状態を指定するといった違いがあります。
通常であればfrom()メソッドで事足りることが多いのですが、fromTo()メソッドが必要になる場面があります。
よく遭遇するのはクリックを合わせたときです。
下のデモを参照してみてください。

デモ

See the Pen
gsap.to,from,fromTo by Sosak (@Sosak2021)
on CodePen.

from()メソッドのボタンを2秒以内に2回目のクリックをしてみてください。
そうすると、途中で変化が止まります。
1クリックなら0-1にopacityが変わる、予定どおりですが、
変化途中に二回目のクリックをすると、そこまでしか変化しなくなってしまうのです。
styleプロパティが要素に追加されてしまっているためと考えられます。

このクリックの問題を解決できるのが、fromTo()メソッドです。

const img2 = document.querySelector('.img2’);

document.querySelector('.btn2').addEventListener('click', () => {
  // gsap.from(img2, { autoAlpha: 0, duration: 2 });
  gsap.from(img2, { autoAlpha: 0, rotation: 45, scale: 0.5, x: 100, y: -100, duration: 2 });
  // 1クリックなら0-1にopacityが変わる、予定どおり
  // 変化途中に二回目のクリックをすると、そこまでしか変化しなくなる、stuleプロパティが追加されてしまっているため。
});

// このクリックの問題を解決できるのが、fromTo()メソッド
document.querySelector('.btn3').addEventListener('click', () => {
  // gsap.from(img2, { autoAlpha: 0, duration: 2 });
  gsap.fromTo(img2, {autoAlpha: 0, rotation: 45, scale: 0.5, x: 100, y: -100, }, { autoAlpha: 1, rotation: 0, scale: 1, x: 0, y: 0,duration: 2 });
  // 1クリックなら0-1にopacityが変わる、予定どおり
  // 変化途中に二回目のクリックをすると、そこまでしか変化しなくなる
});

上のように、変化前の状態を指定することで、常にその状態から変化後の状態へ変化するので、途中でクリックしても意図した動きを実現できます。