hoverやscrollで画像をグニャグニャ動かすアニメーション実装の方法（例あり）

Question

###前提
フロントエンド（CSS、JS）周りでのインタラクティブなWEBサイト作成に強い方にお聞きしたいのですが
以下の実装方法が想定できそうな方にご教授いただきたいです。

###やりたいこと
下のサイトのように
hoverやscrollで画像をグニャグニャ動かしたい
のですがどう実装するのが良いのでしょうか？

###以下参考HP
TAOTAJIMA
http://taotajima.jp/works/
=> canvas？ SVG？ わからない

GardenEight
https://garden-eight.com/work/
=> canvasで実装しているっぽいですが実装に関してはよくわからない

ご教授よろしくお願いいたします！！

Answer 1

@karamarimoさんもすでに書かれていますが、Three.jsを使っているようです。

Three.jsはWebGLを手軽に扱えるライブラリです。
WebGLは、Webで3Dを扱うためのAPIです。
1から構築するのは、3Dに関する様々な知識が必要となりますが、Three.jsを使うととても簡単に3Dを扱えるようになります。

ちなみに3Dと書きましたが、WebGLはGPUを操作するため今回の質問のように2Dの表現を拡張するのにも有用な選択となります。

Three.js自体については以下の入門サイトが参考になるかと思います。

WebGL と JavaScript で学ぶ3D表現 Three.js入門サイト

3D表現は最初は学ぶことがとても多いですが、扱えるようになると表現力が格段に変わってくるので、ぜひ勉強してみてください。

Comments

[S_O]

ご回答ありがとうございます。タグにあるようにThree.jsを使っているのは知っていたのですが、具体的なコードベースで質問するべきでした。。ご回答いただきありがとうございました。

Answer 2

直接の回答になってなくて申し訳ないですが、どちらのサイトもTweenMaxとThree.jsを使っているようです。

Comments

[S_O]

ご回答ありがとうございます。タグやソース確認する上でThree.jsやTweenMaxを使っているのは知っていたのですが、具体的なコードベースで質問するべきでした。。ご回答いただきありがとうございました。