ちょい足しでちょいリッチ！GSAP/TweenMaxを使ってサイトに動きを足してみる1［超初心者向け］

コーディングが終わってブラウザで確認すると「なにか物足りない」「目立ってほしかったコピーが目立たない！」って感じることありませんか？
そんなときにアニメーションをちょっと足していい感じにしませんか？

アニメーションが簡単に実装できるJSライブラリGSAPを使えば
WebGLやCanvasの知識は必要ありません！簡単にアニメーションを追加してちょいリッチなサイトの出来上がりです！

では早速コードを書いていきます！

まず、CDNを貼り付けます。

html

<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>

あとは、動かすためのコードを書くのみ

javascript

// 動かす要素を取得します
const opa = document.querySelector(".op-animation");

// タイムラインを作成する
const timeline_opa = new TimelineMax({ repeat: -1, delay: 1, yoyo: false, paused: false });

// 作成したタイムラインtimeline_opaにアニメーションを記述
timeline_opa
.to(opa, 2.0, {
  opacity: 1
})

このメソッド.to()を繰り返すことで連続したアニメーションを付け足していくことができます。

See the Pen animation using gsap by Kitajima Sumiko (@komisu) on CodePen.

今回は.to()メソッドのみで記述してますが、他にも代表的なメソッドは以下があります。
fromTo(), call(), set(), staggerTo()
参照：TimelineMax

代表的なプロパティは以下があります
opacity:　透明度
rotation:　回転
width:　横幅
height:　高さ
x:　X軸の移動
y:　y軸の移動
scale:　拡大・縮小
backgroundColor:　背景色

組み合わせればもっと表現豊かになりそうですね
参照：Getting Started with GSAP

以上、ちょい足しできるアニメーションの実装方法を紹介しました！
今回紹介したアニメーションはライブラリーのごくごくほんの一部です。
興味がある方はぜひGSAPのサイトをチェックしてみてください！見る価値あり！