ちょい足しでちょいリッチ！GSAP/TweenMaxを使ってサイトに動きを足してみる1［超初心者向け］
コーディングが終わってブラウザで確認すると「なにか物足りない」「目立ってほしかったコピーが目立たない！」って感じることありませんか？
そんなときにアニメーションをちょっと足していい感じにしませんか？
アニメーションが簡単に実装できるJSライブラリGSAPを使えば
WebGLやCanvasの知識は必要ありません！簡単にアニメーションを追加してちょいリッチなサイトの出来上がりです！
では早速コードを書いていきます！
まず、CDNを貼り付けます。
<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
あとは、動かすためのコードを書くのみ
// 動かす要素を取得します
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のサイトをチェックしてみてください！見る価値あり！
Author And Source
この問題について(ちょい足しでちょいリッチ！GSAP/TweenMaxを使ってサイトに動きを足してみる1［超初心者向け］), 我々は、より多くの情報をここで見つけました https://qiita.com/kitajima_yzrh/items/ec058ccaf69872c838bb著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .