Javascript　初めてのGSAPアニメーションの使い方　その2　Tween.from/Jqueryとの併用

15986 ワード
gsap JavaScript jQuery JavaScript テキストリンク

前回の記事はこちら
Javascript　初めてのGSAPアニメーションの使い方　その１　Tweenmax.toの使い方

Tween.from

Tween.fromでは指定したプロパティを起点に要素をアニメーションすることができます。

htmlとcssをを以下に追記します。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="styles/style.min.css" />
    <title>Document</title>
  </head>
  <body>
      <div class="circle"></div>
      <div class="square"></div>
      <div id="rectangle"></div> //追加

    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.6/gsap.min.js"></script>
    <script src="scripts/main.js"></script>
  </body>
</html>


body{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.circle{
  background-color: orangered;
  height: 150px;
  width: 150px;
  border-radius: 50%;
}

.square{
  width: 150px;
  height: 150px;
  background-color: green;
}

#rectangle{ //追記
  width: 150px;
  height: 50px;
  background-color: skyblue;
}

jsシート配下のように追記します。

TweenMax.to($('.circle'), 1, { x:150, y:150, backgroundColor: 'blue' });
TweenMax.to($('.square'), 3, { x: -150, y:-150, scale: 2, delay: 1, ease:Back.easeOut });

TweenMax.from($('#rectangle'), 2, { y: 200, rotation: 180 , scale:1.5 }); //追記

実行結果

水色の長方形は起点として

y軸方向２００pxから、１８０度回転しながら、1.5倍の大きさから

アニメーションしてきます。

Jqueryを合わせて使う

Jqueryのセレクター指定と合わせて使うこともできます。

Jqueryのライブラリーであるscrollmagicと組み合わせる事で
スクロールに合わせたアニメーションの実装も可能です。

Jquery
Jquery selectors

htmlに以下を追記します(CSSは変更なしです)
JqueryもCDNで読み込んで使います。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="styles/style.min.css" />
    <title>Document</title>
  </head>
  <body>
      <div class="circle"></div>
      <div class="square"></div>
      <div id="rectangle"></div>

      <ul>  //追記
        <li>Bacon</li>
        <li>Cheese</li>
        <li>Jam</li>
        <li>Bread</li>
        <li>Eggs</li>
      </ul>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> //追記
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.6/gsap.min.js"></script>
    <script src="scripts/main.js"></script>
  </body>
</html>

要素の取得をJqueryの$()に書き換えてみます。

TweenMax.to($('.circle'), 1, { x:150, y:150, backgroundColor: 'blue' });
TweenMax.to($('.square'), 3, { x: -150, y:-150, scale: 2, delay: 1, ease:Back.easeOut });

TweenMax.from($('#rectangle'), 2, { y: 200, rotation: 180 , scale:1.5 });

TweenMax.to($('li'),1,{ x:50 });

実行結果

jqueryの記述によりli全体を取得してアニメーションすることができています。

以下のような記述も動作します。

TweenMax.to($('li:first-child'),1,{ x:50 }); //liの最初の要素を動かす（Bacon）
TweenMax.to($('li:last-child'),1,{ x:50 }); //liの最後の要素を動かす(Eggs)
TweenMax.to($('li:nth-child(3)'),1,{ x:50 }); //liの３番めの要素を動かす(Jam)
TweenMax.to($('li:nth-child(odd)'),1,{ x:50 }); //liの奇数の要素を動かす(Cheese,Bread)
TweenMax.to($('li:nth-child(even)'),1,{ x:50 }); //liの偶数の要素を動かす(Bacon,Jam,Eggs)

次回はTimelinemaxです
Javascript　初めてのGSAPアニメーションの使い方　その3　Timelinemax