gsap.toメソッドと fromメソッドの使い方

2021年8月13日gsap

gsap.to()メソッド、from()メソッドの使い方を紹介します。

デモ

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

gsapの使い方

いろいろありますが、一番簡単な方法は、以下のcdnをbodyタグ下で読み込む方法です。

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/gsap.min.js"></script>

その他の始め方は、公式サイトにて確認できます。
公式サイト：https://greensock.com/docs/

  gsap.to(第一引数, 第二引数);

どのメソッドでも共通して、第一引数には、ターゲットとなる要素を指定します。
第二引数にはオブジェクトで指定して、そのターゲットにどのようなアニメーションをさせるかを指定します。

引数の指定方法

  gsap.to('h1', {
    x: 100,
    y: 50,
    rotation: '45',
    backgroundColor: 'green',
    duration: 2,
  });

たとえば、上の例であれば、h1要素を指定して、{}の中の値のアニメーションをさせることができます。
第一引数の指定方法は、クラスなら、’.btn’、idなら’#btn’とします。

// cssのクラスで指定
gsap.to('.img1', { x: 100, y: 50, rotation: "45", backgroundColor: 'green', duration: 2 });

また、変数に格納して指定することもできます。

const img1 = document.querySelector('.img1');
  gsap.to(img1, {
    x: 100,
    y: 50,
    rotation: '45',
    backgroundColor: 'green',
    duration: 2,
  });

数字であれば、indexなどで別の変数に格納して、テンプレートリテラルで指定することも可能です。

const img1 = document.querySelector('.img1');
const index = 1;
  gsap.to(`.img${index}`, {
    x: 100,
    y: 50,
    rotation: '45',
    backgroundColor: 'green',
    duration: 2,
  });

gsap.to()メソッドの使い方

gsap.to()メソッドは、第二引数に指定したアニメーションへ向かって変化します。

gsap.to('h1', {
    x: 100,
    y: 50,
    rotation: '45',
    backgroundColor: 'green',
    duration: 2,
  });

上の値であれば、h1が、x軸に100px左へ、y軸では50px下へ、45度回転し、背景を緑色に2秒間かけて変化させます。

gsap.from()メソッドの使い方

gsap.from()メソッドは、第二引数に指定したアニメーションからデフォルト値へ向かって変化します。
デフォルト値に関してはcssで別途指定していればそこに最終的に向かって変化します。

リビールのアニメーションでよく使われます。

リビールのアニメーションで使う場合の注意点

要素にvisibilityをhiddenに設定する
opacityではなくautoAlphaを使う

gsap.from(img2, {opacity: 0, duration: 2});

htmlがパースされた後コンテンツは表示されるので、opacityの0だけではフラッシュしたようになってしまう。

opacityを使う場合、その対象に対して予めvisibilityをhiddenに設定しておきます。

.img2 {
  visibility: hidden;
}

autoAlphaはvisibilityプロパティとopacityプロパティに作用します。
visibilityはinheritがつきます。
fromを使うことで、opacityは0から1へ、visibilityはhiddenからinheritで実質visibleへ変化させることができます。

const img2 = document.querySelector('.img2');
gsap.from(img2, { autoAlpha: 0, rotation: 45, scale: 0.5, x: 100, y: -100, duration: 2 });