GSAP to, from, fromTo, setの使い方

HTML/CSSを勉強していてWeb上のアニメーションを扱ってみたい人は多いと思います。もちろん、CSSでもアニメーションでも出来ますがGSAPを使うことでより簡単で複雑なアニメーションが実装できます。Javascriptが苦手だなと感じる方にもGSAPはとても理解しやすく簡単に扱えます。今回はto, from, fromTo, setの使い方や違いを説明していこうと思います。GSAPの基礎の部分になるので覚えていきましょう。

GSAPの全体的な基本の使い方は一連のアニメーションを実装しながらこちらで説明しています。初めてGSAPを触る人は覗いてみてください。

GSAPの基本的な使い方を一緒に学ぼう！

記事の最後に全てをまとめたCodepenもありますので、確認してみてください。

GSAPの基本的な使い方はこのように書きますよね。この文の一番最初をこれらのように変えることでアニメーションが変わったり、コードも短くて済んだりします。では説明していきますね。

gsap.to
gsap.from
gsap.fromTo
gsap.set

to

toはおそらく一番使うかと思います。「~まで（へ）〇〇する」と覚えておけばいいです。例えば要素を今ある位置から右（ｘ）へ移動させたい場合などに使います。

gsap.to(".box",{
　　　　　x:100 //右に100px移動
　　　　　});

toは既に設定してある要素の位置から移動や拡大などのアニメーションをします。このように書くとどうなるでしょうか？

gsap.to(".box",{
　　　　　x:100, //右に100px移動
　　　　　opacity: 0,
        scale: 2
　　　　　});

この場合は右に移動しながら不透明度が１００％から０％になり、大きさが２倍になります。

toは現在の位置や大きさから変化させるときに使いましょう。

from

対象的にfromは「~から○○戻る」とでも覚えておけば大丈夫です。fromは設定した位置や大きさから元に戻ります。

gsap.from(".box",{
　　　　　x:100 //右100pxから移動
　　　　　});

このように書くと先ほどのtoとは対象的に右から戻ってきます。fromを書くことでどこから移動して来るか、どの大きさから元の大きさに戻すなどの設定が出来ます。

fromが使えると思うのはローディング後のページのオープニングアニメーションなどに使えますね。まずはCSSで位置を設定しておいて、後からfromを使ってGSAPでアニメーションを加えるだけになります。

fromTo

fromToは見ての通り、fromとtoのあわせ技です。fromで初めのアニメーションの位置などを設定して、toで終わりを設定することになります。

gsap.fromTo(".box",{
　　　　　x:100 //右から100px
　　　　　},
        {
　　　　　x:0, //左にに100px移動して元の位置に戻る
        scale:0 //０％まで縮小
　　　　　});

初めの鉤括弧はfromの設定をして、コンマで区切ってtoの設定を鉤括弧の中に書きます。fromToを使えばコードが短くて済みますね。

set

setは個人的にかなり使います。setはアニメーションなどはしないけれども、要素の設定を書き換えられます。SVGのアニメーションが好きでよく使うのですが、SVG内の要素の設定を予め変えて置いて後でアニメーションする際に使います。CSSで要素を変えなくてもいいので、全てGSAP内で行うことが出来ます。

gsap.set(".box",{
　　　　　x:100 //右100pxの位置に設定を変える
　　　　　});

これが便利に使えるのがタイムラインを作成する際です。setで予め設定を変えておけば、その要素のアニメーションが開始されるまで動きません。仮にfromをタイムラインで使うとうまくアニメーションが動かないときがあります。その理由は、タイムラインの順番が来るまでsetは動きませんが、fromは順番が来たら設定した位置から元に戻るので不自然なアニメーションになったりします。

gsap.set(".box",{
　　　　　x:100 //右100pxの位置に設定を変える
　　　　　});

var tl = gsap.timeline();

tl.to(".box",{
　　　　　x:-100 //右100pxの位置から元の位置の-100pxへ移動
　　　　　})
　　.to(".box",{
　　　　　y:100 //左へ移動した後に、下に100px移動
　　　　　})

タイムラインの外でsetを使うか、タイムラインの初めにsetで要素の設定を決めておきましょう。

これでGSAPの一番基礎の部分が学べたと思います。GSAPの練習には有料プラグインも試せるのでCodepenがおすすめです。あとCodepenで僕をフォローしてください。CSSアートやGSAPアニメーションを主に投稿しているので、参考になればいいなと思います。

まとめのCodepenです。右上のリンクをクリックしてご自身で確認してみてください。

See the Pen GSAPto, from, fromTo, setの使い方 by Shunya (@shunyadezain) on CodePen.

これからもGSAPのチュートリアルをご紹介していきますね。

ではまた！

おすすめ本

リンク