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

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

 

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

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

 

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

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

to

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

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

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

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

この場合は右に移動しながら不透明度が100%から0%になり、大きさが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 //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のチュートリアルをご紹介していきますね。

ではまた!

 

 

おすすめ本

タイトルとURLをコピーしました