Help us understand the problem. What is going on with this article?

TweenMaxを使ったアニメーション例

More than 1 year has passed since last update.

記事概要

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

TweenMaxとは

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

導入方法

ファイルをダウンロードする場合であれば公式サイトのDOWNLOAD GSAPから
zipファイルかgithubかをお好みで選んでください。

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

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

Examples

example.1

See the Pen LmBoXz by daichi (@da10410) on CodePen.

HTML部分

今回は一文字ずつアニメーションを行いたいので、aタグの中にspanで一文字ずつ入れています。
また、同じようにaタグの中に背景色アニメーション用のdivタグを入れておきます。

CSS部分

aタグをblock要素に、spanとdivをinline-block要素にしpositionを整えます。
その他は省略

JS部分

・TweenMax.toの使用例

TweenMax.to('操作するオブジェクト', アニメーション時間, {アニメーション内容});

ここではマウスが乗った時、0.25秒かけて背景色用のdivがwidth:100%になり
aタグのborderが1px solid grayになり文字色がgrayになるアニメーションをつけています。

・TweenMax.staggerToの使用例
.staggerは配列化されたセレクターを、順番にアニメーションさせるものです。

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

ここではマウスが乗った時、文字列の入ったspanが0.25秒かけて360°前回転するアニメーションになっており、
最初の'.obj01t'のアニメーションが開始された0.02秒後に次の'obj01t'のアニメーションが始まるようになっています。

omochironn
ぴよっこふろんとえんじにあ ()!
https://da1-blog.site
yowayowa-engineer
弱々エンジニア会とは駆け出しエンジニアやベテランエンジニアまで、弱々から強々まで幅広く集まるコミュニティのエンジニア集団です!!メンバー募集してますので気になる方は、URLよりSlackに参加ください!条件等は特にありません!
https://join.slack.com/t/yowayowa-engineer/shared_invite/zt-do4vhhzm-Yj~6DIMIfvqMvHm0hcXGrA
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした