【コピペOK】GSAPを使って画像をフワフワ浮いているように見せる方法「オマケ付き」

どうも。シャオです。

今回はGSAPを使って画像をフワフワ浮いているように見せる方法を紹介します。

画像でなくとも任意の要素を繰り返し動かせたいときにも使えるので、汎用性は高いです。

シンプルなデザインのWebサイトに動きを加えたい。

Webサイトの印象を強くしたい。

そんな方にオススメの記事になっています。

GSAPとは？

GSAPはJavaScriptライブラリの1つで、Webサイトにアニメーションを加える時に役立ちます。

軽量、多機能ながら、直感的に使用できるのが魅力的ですね。

以下が実装するためのコードです。

そのままコードを利用するには、CDNの読み込みをお願いします。

See the Pen GSAP Timeline by zentarou01 (@zentarou01) on CodePen.

オマケで指定できるアニメーションについても紹介します。

Easeについてはこちらをご参照ください。

CSSについてもデザインの仕様に合わせて調整してくださいね。

今回紹介した機能は、GSAPで出来ることの”ごく一部”です。

GSAPを使いこなせるようになれば、

といったことができるようになります。

この記事がGSAPを使うキッカケになったら嬉しいです。

それでは、また。