アニメーションってかっこいいですよね。
かっこいいサイトって大体めっちゃ動きますよね。
ということでAnimationライブラリを使う練習してみます。
TweenMaxとは
今回はTweenMaxというライブラリを使います！
凄く高機能らしいのですが、ファイルサイズがめっちゃ重いみたいです（113KB)
こちら曰く、
TweenMaxは113KBと容量が大きいものの、モジュールを分解して読み込むことが可能。TweenMaxの兄弟であるTweenLiteだとわずか28KBです。パッケージマネージャーnpmやTypeScriptでの利用も、他のライブラリと比べて一歩進んでいます。詳しくは記事「ES Modules対応のgsapの使い方 - Qiita」を参照ください。
とのこと。
ファイルサイズを軽く扱う方法についても習得していければと思います。
(あとで参考にしそうなサイトたち）
https://blog.yuhiisk.com/archive/2016/10/05/create-tweenlite-animation1.html
https://qiita.com/manabe_66/items/42fec3e488190a0146f8
TweenMax扱う方法
https://rfs.jp/sb/javascript/03js/greensock.html
http://un-tech.jp/tweenmax-started/
今日はこちらのサイトを参考に。
公式サイトでダウンロード可能です。
CDNを利用する場合は、
<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
これをHTMLに貼り付けるだけでオッケーらしいです。
軽量化等はひとまず置いて、今回はこれでやってみます。
TweenMax書き方
メソッドたくさんあるようですが、主要なものだけ。
| メソッド | 効果 |
|---|---|
| set | プロパティの値のみ |
| from | 設定した値から初期値にアニメーション |
| fromTo | 初期値を再設定・設定した値から初期値にアニメーション |
| to | 初期値から設定したアニメーション |
| stagger | 配列化されたセレクターを順にアニメーション |
TweenMax.to('.c-kirby',2,{x: 700,repeat:-1,yoyo:true});
これはメソッドtoですね。
{}の中は順に
動かす要素の指定 プロパティ指定 アニメーションの秒数 繰り返し設定(-1は無限リピート) 繰り返し方法（yoyoは0-100%-0%の順で繰り返す）
色々な指定ができるので、詳しいのは公式を見るかhttp://reiwinn-web.net/2017/06/07/tweenmax/
このサイトが良さげです。
読み込むとちゃんと動きました！