【GSAP】slowMoのカスタマイズ方法

今日はslowイージングのカスタマイズ方法についてです。

アニメーションの途中で、まるでスローモーションになったかのような動きをつけることができます。

基本の使い方

このイージングを使用するためには、「EasePack」というファイルが必要です。
公式サイトにインストールの方法が書かれているので、こちらを参考にファイルを取り込んでください。

See the Pen sample-slow by Michi (@Michi_) on CodePen.

カスタマイズする必要がないときは、easeプロパティに「slow」を指定するだけでOKです。
これだけでも途中がスローモーションになったかのような動きになります。

カスタマイズ方法

slowをカスタマイズするために、以下のように3つのパラメーターを設定することができます。

gsap.to(".sample01",{
　　ease: "slow(0.5,　0.9,　true)"
});

ひとつずつ見ていきましょう。

linearRatio

そもそも、slowMoというイージングは、イージング”.out（減速）” 、イージングのない部分”(ease:none)” 、イージング “.in（加速）” の３つのイージングを組み合わせることでできています。初めに減速し、一定の速度で動く部分を経て最後に加速します。

ひとつ目のパラメーター「linearRatio」では、イージングの始まりを「0」、終わりを「1」として、そのうちイージングのない部分、つまり「ease:none」の割合がどれだけあるかを設定します。

例えば、「0.5」を設定すると、イージングのない部分が0.5、つまり100％の半分の50％となり、残りの50％のうちの半分である25％ずつに”.out（減速）” と”.in（加速）” が割り当てられます。

同様に、「0.8」を設定すると、始めの10％で”.out（減速）”、次の80％が「ease:none」、そして最後の10％で”.in（加速）” します。

また、イージングの始まりを「0」、終わりを「1」としていますので、linearRatioには「0」から「1」までの数値を設定しなければなりません。

デフォルトは「0.7」です。

power

ふたつ目のパラメーターは「power」です。

それぞれのイージングの強さを設定することができます。

「1」よりも大きな数字を設定すると、イージングのない部分が反転して動きます。
使い方次第でとても面白い動きになりそうです。

デフォルトは「0.7」です。

yoyoMode

３つ目のパラメーターは「yoyoMode」です。
「true」とすることで、トゥイーンのyoyoと同様の効果を得ることができます。

たとえば、フェイドインで文字が表示され、そしてフェイドアウトしていくアニメーションを作りたい時。

gsap.from(".text02", {
　　duration: 5,
　 opacity: 0,
　 ease: "slow(0.5, 0.8, true)"
});

このように記述すると、opacityは「0」から「1」へ、そして「1」から「0」へと戻ってきます。
それによって、フェイドイン、フェイドアウトの動きを作ることができます。

そして、yoyoModeのすごいところは、この折り返す動きのアニメーションを別のアニメーションと同期させて動かすことができるところです。

以下のサンプルをご覧ください。

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

このアニメーションでは、減速とフェイドインが同時に行われ、イージングのない部分を経て加速とフェイドアウトが同時に行われています。

gsap.to(".text01", {
　　duration: 5,
 　x: 200,
　 ease: "slow(0.5, 0.8)"
});
gsap.fromTo(".text01",
  {opacity: 0},
  {duration: 5, opacity: 1, ease: "slow(0.5, 0.8, true)"}
);

下線で示した箇所のように、ひとつ目とふたつ目のパラメーターを同じものにすることで、２つのアニメーションの動きを同期させることができます。

ちなみに、公式サイトの例ではフェイドイン・フェイドアウトの動きをつけるときに .from() が使われていましたが、実際に使うのであれば .from()よりも .fromTo() の方がおすすめです。

テキスト自体のcssに初期設定である opacity: 1; が設定されている以上、開始地点の透明度を0にしても、アニメーションが開始されるまでの一瞬にテキストが表示されてしまうんですよね。

.fromTo() で開始地点も終了地点も指定してしまった方が、綺麗なアニメーションになりました。

まとめ

今日はslowイージングのカスタマイズ方法について説明しました。

アニメーションを組み合わせることで、いろいろな動きを実現することができそうです。

参考サイト