TweenMaxの使い方・アニメーション実装例

animation

2018-05-15

TweenMax.jsを勉強した際にできた副産物達を、めちゃくちゃ雑な解説と共にとっておく為のメモ記事。
これからTweenMaxを勉強する人の助けになれば幸いです。誤りなどございましたらご指摘お願いします！

TweenMax とは

高機能な JavaScript アニメーションライブラリです。
商用利用、非商用利用に限らず基本的に無料で、課金ユーザーのみ
閲覧アクセス可能なコンテンツもあります。
今回のアニメーション例では

jQuery

を使用していますが、
依存性はないので

jQuery

が無くても使用可能です。

導入方法

ファイルをダウンロードする場合であれば公式サイトから

zipファイル

か

github

から

clone

するかお好みで選んでください。

CDN を使用する場合は下記を HTML にコピペしてください。

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

Examples

example.1

HTML 部分

今回は一文字ずつアニメーションを行いたいので、

<a>

の中に

<span>

で一文字ずつ入れています。
また、同じように

<a>

の中に背景色アニメーション用の

<div>

を入れておきます。

CSS 部分

<a>

を

block要素

に

<span>

と

<div>

を

inline-block要素

にし

position

を整えます。
その他は省略

JS 部分

TweenMax.to の使用方法

// TweenMax.to('操作するオブジェクト', アニメーション時間, {アニメーション内容});
TweenMax.to("#bgc01", 0.25, { width: "100%" })
TweenMax.to(".obj01", 0.25, { border: "1px solid gray", color: "gray" })

今回の例ではマウスが乗った時、0.25 秒かけて背景色用の

<div>

が

width:100%

になり、

<a>

の

border

が

1px solid gray

になり文字色が

gray

になるアニメーションをつけています。

TweenMax.staggerTo の使用方法

// TweenMax.staggerTo('操作するオブジェクト', アニメーション時間, {アニメーション内容}, 次のオブジェクトのアニメーションが開始されるまでの時間);
TweenMax.staggerTo(".obj01t", 0.25, { rotationX: 360 }, 0.02)

stagger

は配列化されたセレクターを、順番にアニメーションさせるものです。

今回の例ではマウスが乗った時、
文字列の入った

<span>

が 0.25 秒かけて 360° 前回転するアニメーションになっており、
最初の

.obj01t

のアニメーションが開始された 0.02 秒後に
次の

obj01t

のアニメーションが始まるようになっています。