参考サイトの動きを再現したいです。有識者の方々知恵をお貸しください。

Question

実現したいこと

参考サイト(https://aquall.jp/)のファーストビューのスライダーの動きを再現したいです。

発生している問題・分からないこと

mask-imageを使って、画像が切り替わる際にmask自体も動いて“水面のように波打つ”演出を実装したいと考えています。
下記のようなイメージ（【参考：Aquall公式サイト https://aquall.jp/】ファーストビュー部分）です。

・写真がスライドで切り替わる

・その切り替え時にmask画像（波紋や水面パターン）がアニメで動き、柔らかな水面エフェクトになる

【 質問 】
・このようなmaskアニメーションの構造やコツ、再現テクニックをご存知の方はいませんか？

・「どの要素にmaskをかけるのがよいか」「動かす仕組み（例：JSやGSAPの使い方）」のヒントをいただけたらありがたいです

※自作でやってみたが、mask部分しか動かなかったり、画像が消えてしまったりして、公式のように「全面画像＋一部水面アニメ」がうまくできません。

該当のソースコード

特になし

試したこと・調べたこと

• teratailやGoogle等で検索した
• ソースコードを自分なりに変更した
• 知人に聞いた
• その他

上記の詳細・結果

googleで検索しても参考になるような記事は見つからなかった。

補足

特になし

Comments

[Lhankor_Mhy]

このような感じですか？
https://ja.splidejs.com/premium/#splide06

[ko_ma]

そうです！
かっこいいですね！

Answer 1

codepenにこんなサンプルがあがっていました
参考までに

https://codepen.io/ekwwawpb-the-styleful/pen/KwdbRzR

Comments

[ko_ma]

参考にします！
ありがとうございます！