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

本記事では、gsap.from()の使い方を説明します。
前回説明したgsap.to()との違いも解説しています。

基本の使い方

前回解説したgsap.to()が元々配置した位置からGSAPによって指定した位置まで動く、というものだったのに対し、今回説明するsgap.from()は、アニメーションの開始位置を指定することで、指定した位置から初期配置の場所まで動く、というものになります。

比較のために.from()と.to()を並べてみました。
わかりやすいように背景色をつけ、初期位置に黒枠をつけています。
右下のrerunボタンを押すと、再度アニメーションが動作します。

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

.from()は指定した位置から初期位置へ戻ってくるのが、.to()は初期位置から指定した位置へ移動するのがわかります。

今回はわかりやすくX(translateX)しか指定していませんが、.to()と同様、rotation,translate,scale,skew,matrixなどで位置を指定することができます。

今回は.from()の使い方を説明しました。

webサイトでは初期位置に戻ってくるような動作、例えばテキストやコンテンツのフェイドインなどに使えそうですね！

参考文献