【GSAP】デフォルトの単位を変更する

GSAPでは基本的に単位を省略して記述します。
それは、デフォルトの単位が設定されているからです。

では、デフォルトの単位以外を使用したいときはどうすればよいでしょう。
今日はデフォルトの単位を変更する方法について説明します。

デフォルトの単位について

公式によると、ほとんどの数値のデフォルトは「px」、回転関連の値は「deg」で設定されているそうです。

今日はこのデフォルトで設定されている単位以外を使いたいときにどうすればいいか、という方法を説明します。

オブジェクトごとに単位を変えたいとき

以前.to()について説明をしたときに触れたのですが、以下のようにダブルクォーテーションで囲って記述することで、デフォルトで設定された単位以外のものを使用することができます。

gsap.to(".sample01", {
  x: "30vw",
  duration: 2,
  repeat: -1,
  repeatDelay: 0.5,
});

gsap.to(".sample02", {
  x: "30em",
  duration: 2,
  repeat: -1,
  repeatDelay: 0.5,
});

この場合は、translateの単位を変更していますが、sample01ではvw、sample02ではemと、それぞれ異なる単位を設定することができます。

See the Pen Untitled by Michi (@Michi_) on CodePen.

すべてのオブジェクトの単位を変更したいとき

一方で、すべてのオブジェクトに対して一括して単位を変えたい時があるかもしれません。
ですが、毎回単位をつけて記述するのは手間がかかります。

そのようなときに使えるのが、.config()というメソッドです。

公式によると、.config()ではいくつかのオプションを使用することができますが、今回の場合はunitsを使います。
このオプションを使うと、さまざまなプロパティに使用されるデフォルトのCSS単位を設定することができます。

See the Pen sample_config-units02 by Michi (@Michi_) on CodePen.

gsap.config({
  units: {x: "vw"},
});

gsap.to(".sample01",{
  x: 100,
  duration: 2,
  repeat: -1,
  repeatDelay: 0.5,
});

gsap.to(".sample02",{
  x: 50,
  duration: 2,
  repeat: -1,
  repeatDelay: 0.5,
});

冒頭部分に「config()」の記述がありますが、上記のように{ }の中に、変更したいプロパティと、単位を記述します。

unitsは、「unit」ではなく「units」と複数形になりますので気をつけましょう。

私は最初「unit」と記述して動かなくて困りました。
皆さんは気をつけてくださいね。

複数のプロパティを変更したいときは、以下のように、カンマで繋いでいくつでも設定することができます。

gsap.config({
  units: {x: "vw", rotation: "rad"},
});

config()はデフォルト値を変更するものですので、記述する位置に関係なく、指定したプロパティはすべて単位が変更されることに注意しましょう。

例えば、該当部分をコードの1番最後に記述したとしても、指定したプロパティのすべての単位が置き換わります。

まとめ

今日はデフォルトの単位の変更方法について説明しました。

全て一括で単位を変更するのは使い所が難しい気もしますが、個々で別々の単位を設定できるのは便利そうですね。

もしよろしければ、configメソッドの他のオプションについても、目を通しておくと何かの役に立つかもしれません。