アニメーションといえばコレ！TweenMax！

2019.11.26

JavaScriptライブラリ「TweenMax」の使い方を勉強していました。

最近流行りのスクロールに合わせてしゅるしゅる要素が表示されたりうごいたりする効果がやりたくてですね…みんな何でやってるんだろう、と見てみると大体これですね！

私がやりたいスクロールに合わせて…というのは少しひと手間かかるので、まずは普通にアニメーションをしゅるしゅるさせるデモを作ってみました。

設定

上記のファイルを設置したいフォルダに入れていきます。
まずはhead内にcdnでtween.max.jsを読み込みます。jqueryはなくても動きます。（色々応用していくなら必要です）

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

jsの記述

TweenMax.to（指定した要素に変化）

一番基本のやつで、シンプルに指定した要素に変化します。#circle1のところは任意のidやclassでどうぞ。

#circle1に対して、0.5秒かけて、｛　｝の変化をさせる…という指定をしています。ご覧の通り、色を変えたり、シャドウをつけたり、XYで位置を変化できたりします。こりゃ便利！

// to
TweenMax.to('#circle1', 0.5, {background:"red",y:'0px',opacity:'1'});

→ デモはこちら

TweenMax.from（指定した要素から初期状態へ戻る）

指定した要素から戻ります。toの逆です。これはどう使っていいのか、使いどころがよくわかりません。

#circle2に対して、2秒かけて、｛　｝の変化から戻る…という指定をしています。

// from
TweenMax.from('#circle2',2, {background:"green",y:'-300px'});

→ デモはこちら

TweenMax.fromTo（指定した初期値→指定の値へ変化）

上二つが合体したもの。初期値を設定でき、そこから変化させる効果です。これは使いやすそうですね。

// fromTo
TweenMax.fromTo('#circle3', 1.5, {background:"green",y:'300px',opacity:'0'},{y:'0px',opacity:'1'});

→ デモはこちら

TweenMax.staggerFromTo（複数の指定した初期値→指定の値へ変化）

複数指定可能な.staggerと基本のやつが組み合わさったもの。「TweenMax.staggerTo」「TweenMax.staggerFrom」もありますが、使いやすいので「TweenMax.staggerFromTo」のデモのみ掲載。

「猫の写真(.move_nuko)」を「0.5秒かけて」「opacity:0」から「opacity:1」へ、0.7秒ごとに変化…という指定をしています。

// staggerFromT
TweenMax.staggerFromTo(".move_nuko" , 0.5 , {y:'-200px',opacity:'0'} , {y:'0px',opacity:'1'} , 0.7);

→ デモはこちら

これは理想のしゅるしゅるアニメーション！これをやりたかった！！この効果をちょっと加えるだけでもおしゃれなサイトになりそうですね。

でも、これでは終わらんよ…私がやりたいのは「スクロールにあわせて」この効果を付与していくことなのですが…つまりこの要素が表示された瞬間に…みたいな指定が必要になるわけですね。。js苦手だよぉ～。自分で書けないよ～…ということで、この「TweenMax」とあるjsを組み合わせることでそれも可能になるようです。次の記事では、その「TweenMax」ともう一つのjsの合わせ技を勉強したいと思います。

B!