アニメーションライブラリTweenMaxを使ったWebサイト

TweenMaxとは、Flash時代からのトゥイーンアニメーションライブラリの老舗である、GreenSockのGSAP(GreenSock Animation Platform)のモジュールのひとつです。
軽量でパフォーマンスが高く、高機能かつ比較的簡単に複雑なアニメーションを制作することができることから、最もスタンダードなJavaScriptのアニメーションライブラリとして普及しています。

GSAPの構成するモジュールは、

• TweenMax – トゥイーンアニメーションを制御するモジュール
• TweenLite – TweenMaxの軽量版
• TimelineMax – タイムラインを制御するモジュール
• TimelineLite – TimelineMaxの軽量版

かなり簡単な説明ですが、上記の4種類です。
よっぽどシビアなパフォーマンスが求められない限り、TweenMax、TimelineMaxの使用すればよいでしょう。

それでは、具体的にどんな事が可能なのかを参考サイトを見てみましょう。
（※TweenMaxのみで実現可能なものだけではありません）

digitaldesigner.

フランスのデジタルデザイナー／クリエイティブディレクターのホームページ。
マウスの動きに応じて、画像や文字が反応し、ついつい深い所までコンテンツを見て行きたくなります。
トップページで、A-Zにかけて実績などコンテンツに誘導する動線は圧巻です。

ウェブサイトを見る

Agostinetto wine

19世紀から続くイタリアサルデーニャ島のワイナリー・Agostinettoのホームページ。
写真や文字、「Pull to navigate」ボタンをドラッグ&ドロップしてみてください！
まるで（懐かしい）フルフラッシュサイトのような動きを実現しています。

ウェブサイトを見る

Discover the Global World of Lexus

トヨタの自動車ブランド・レクサスのブランディングサイト。
ラージサイズの美しい写真や動画、マウスの動きやスクロールに応じた奥行きのある動きが、没入感を演出してくれます。

ウェブサイトを見る

HILL8

ロシアの不動産開発会社HILL8のホームページ。
スクロールに合わせて、各要素がふわっと動いたり、ページ遷移した際に出てくる文字の動きにもこだわりを感じます。

ウェブサイトを見る

いかがでしょうか？
正直選びきれずに、予定より少なめの紹介となってしまいました。
今回、Webサイトをピックアップする中で感じたことは、TweenMaxがいかに広く普及しているかということでした。
小気味よい動きをするなと思って、使用しているアニメーションライブラリを見てみると、予想を遥かに上回るウェブサイトでTweenMaxが導入されていました。
それこそ、導入のハードルが低く、安定した動作を提供できる証ですね。
TweenMaxがどれほど優秀なライブラリであるかを、改めて実感しました。

注意点としては、基本的には商用利用もOKですが、会員制などの課金コンテンツで使用する際には、有料のClub GreenSockに加入する必要があります。

それでは、本年もどうぞよろしくお願いいたします！

digrartのホームページ制作
https://www.digrart.jp/web/web-design/

ホームページ制作に関するお問い合わせ
https://www.digrart.jp/contact/