【GSAP】gsap.to()の使い方を解説

gsap.to()は、アニメーションの完了位置（どれくらいの距離を動いてどの形でアニメーションが完了するのか）を指定することで、元々あった位置から完了位置までの動きをつけるものです。
位置を指定するのに、cssプロパティのtransformで使用する関数値を使うことができます。cssとは書き方が少々異なるものもありますが、基本的に単位は省略できます。
この記事では、transformで使用するrotation,translate,scale,skew,matrixについてみていきます。

基本の使い方

先述したとおり、gsap.to()は、アニメーションの完了位置を指定することで、元々あった位置から完了位置までの動きをつけます。
動きをつける対象をクラス名（もしくはid名）で指定し、{}内にアニメーション完了時の状態を記述しましょう。

例えば、90度回転した状態なのであればrotation:90、右方向に200px移動しているのであればX:200（XはtranslateXを省略した形です。同様にtranslateYは単にYと記述できます）というように記述します。また、複数の記述を , で区切ってつなげることで、さまざまな動きを組み合わせることが可能です。

まずは以下の例をご覧ください。

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

一つずつ解説していきますね。

rotation,translate

gsap.to(".sample01", {
　　rotation: 450,　　　//450度回転する。単位はdeg
　　x: 200,               //x方向に200動く。単位はpx
　　duration: 3　　　　　　　//アニメーションの長さ。単位はsecond（秒）
});

基本的に単位は省略します。

なお、durationはアニメーション完了時の位置を指定するものではなく、どれくらいの時間をかけてアニメーションを動かすかを指定するものです。
durationのデフォルト値は0.5です。

translate-02

translateX、translateYではpx以外の単位を使うこともできます。

gsap.to(".sample02", {
  rotation: 450,
  x: "200vw",
  duration: 3
});

sample01の記述にvwを付け加えただけですが、オブジェクトが画面外までかっ飛んでいったのがわかると思います。なんといっても200vwですからね。

単位をつける場合は、上記のようにダブルクォーテーションで囲います。
vwの他、vhやemなどの単位も使用可能です。

scale

gsap.to(".sample03", {
  rotation: 450,
  scale: 1.5,
  x: 200,
  duration: 3
});

今度はscaleを付け加えてみました。
オブジェクトが1.5倍に拡大されています。
x方向だけ拡大したい、y方向だけ拡大したいという場合には、scaleXなどと記述します。

skew

gsap.to(".sample04", {
  skewX: "-45deg",
  x: 200,
  duration: 3
});

お次はskewです。
skewに関しては、単位を省略すると動きませんでした。なぜ・・・。
ダブルクォーテーションで囲んで単位をつけることで動作するようになりました。

matrix

gsap.to(".sample05", {
  transform:"matrix(1,2,3,4,5,6)",
  duration: 3
});

最後にmatrixです。
transformの関数値が使用できるならばmatrixも使えるはずだと思ったのですが、なかなか実装方法が見つからず難儀しました。あまり使う人がいないのでしょうか。
公式のQ＆Aの中で見つけることができました。
Transform Matrix in GSAP3

これまでのものと記述の仕方が異なり、transform:”matrix(1,2,3,4,5,6)”と記述する必要があるようです。

まとめ

今回はgsap.to()でアニメーション完了時の状態を指定し、簡単なアニメーションをつける方法を説明しました。

GSAPはマスターすれば複雑なアニメーションを簡単に実装することができます。
ぜひあなたもGSAPマスターへの第一歩に学習を始めてみてはいかがでしょうか。

参考文献