本日は.fromTo()の使い方について説明します。
.fromTo()は、.to()と.from()の両方の性質をあわせもっています。両者と比較しながら、fromTo()について理解を深めていきましょう。
基本の使い方
まずは基本的な記述方法です。
.fromTo()は、アニメーション開始時点の状態と終了時点の状態をそれぞれ指定します。.to()と.from()が初期位置を開始時点の状態、あるいは終了時点の状態と位置付けていたのに比べ、開始と終了それぞれの状態を指定することができるので、アニメーションの制御がしやすくなります。
実際の挙動は後ほどご覧いただくとして、まずはコードを確認しましょう。
gsap.fromTo(".sample01",
{x: -200, opacity: 0,}, //開始時点の状態
{x: 200, opacity: 0.5, duration: 3} //終了時点の状態
);{ } 内にそれぞれ開始、終了時点の状態を記述し、 , で区切ります。
.to()と.from()との違い
では、実際の挙動を見てみましょう。
See the Pen sample_fromTo by Michi (@Michi_) on CodePen.
今回は、translateに加えてopacityも変化するよう設定しました。
gsap.fromTo(".sample01",{x: -150},{x: 150, duration: 3});
gsap.from(".sample02",{x: 150, duration: 3});
gsap.to(".sample03",{x: 150, duration: 3});.to()と.from()は、終了値／開始値を指定することで、終了値／開始値から初期設定の状態に変化するアニメーションを作ることができました。
例えば、.to()の場合、終了値ひとつしか指定できないので、開始値は必ず最初にcssで設定したものになります。同様に.from()の場合は、開始値を指定することしかできず、終了値はcssで設定したものになります。
.fromTo()の場合は、開始値と終了値をそれぞれ設定することができます。cssで設定した内容はあくまで基準点であり、初期設定の状態に関係なく開始値と終了値を設定することができます。
これによって何ができるかというと、以下の例をご覧ください。
See the Pen Untitled by Michi (@Michi_) on CodePen.
このように、同じ基準点を持った対象に、開始値も終了値もすべて異なるアニメーションをつけることができます。
まとめ
今回は.fromto()について説明しました。
これだけでも、使いこなせたら素敵なアニメーションができそうですね。
学習すればするほど奥深い世界をのぞかせてくれそうなGSAP。今後も楽しみでなりません。
参考文献
コメント