このページの本文へ

高度で複雑なWebアニメーションが自在に作れる!GreenSockプラグイン5つ

2017年10月05日 16時57分更新

記事提供:WPJ

  • この記事をはてなブックマークに追加
本文印刷

FlashライクなWebアニメーションを実現するJavaScriptライブラリー「GreenSock」。イラストからテキストまで、思い通りのアニメーションを作成できる便利なプラグインを紹介します。

GreenSockのプラグインをいくつか紹介します。

紹介するプラグイン

  • ベジェ曲線パスに沿ってプロパティをアニメーションする「BezierPlugin」
  • 画面上で要素をドラッグできるGSAPの「Draggable」ユーティリティと、要素を滑らかに動かしてスムーズに停止させる「ThrowPropsPlugin」
  • SVGストロークを動的に描画する「DrawSVGPlugin」
  • パスのポイント数が異なっていても任意のSVGパスを別のパスにモーフィングできる「MorphSVGPlugin」
  • おもしろいテキストアニメーションエフェクトを実現する「SplitText」ユーティリティ

このチュートリアルを最後まで読めば、短時間で複雑なWebアニメーションを作成できます。

シンプルなシーケンスアニメーションとstaggerアニメーションでのTweenMaxの使い方を含むGreenSockの基本については、さよならFlash!いまこそ学ぶWebアニメライブラリー「GreenSock」入門を参照してください。

この記事をWPJのサイトで読む

Web Professionalトップへ

Web Professionalトップページバナー

WebProfessional 新着記事

ASCII.jp会員サービス 週刊Web Professional登録

Webディレクター江口明日香が行く