Noob Front End Engineer Blog

CONTACT

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

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>border1px 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のアニメーションが始まるようになっています。


Written by daichi iwamoto