複雑なアニメーション実装に対する実装アプローチについて
解決したいこと
Web開発において、参考にしたいサイトのアニメーションを効率的に調査し、自身のサイトでも同等のアニメーションを実装したいです。
しかし、現状ではその実装方法の調査と実装に多くの時間を費やしてしまっています。
こういったケースの際に一般的にどのようにして、実装をしていっているのかご意見を伺いたいです。
現状 / 困りごと
例えば、以下のようなサイトでのメインビジュアルのアニメーションをベースにした実装を作ってほしいとお願いされたとします。
https://village.town/
特に上記のようなJavascriptのライブラリでの実装が多用されている場合、
実装の理解や再現に時間を要することがしばしばあります。
自分で試したこと
参考にしたいサイトのソースコードをブラウザの検証ツールを用いて確認しますが、
Javascriptのコードが圧縮されているケースがほとんどのため、コードの解読が難しいです。
Code Penなどのサービスサイトから、作りたい実装に近いサンプルを探して、部分的にスニペットを借りるような流れをたどることが多いですがやはり、これもに時間がかかってしまいます。
こうした状況を改善するための効率的なアニメーションの調査・実装方法を知りたいです。
1.目標の要素を分解していき、自身の持つ技術で代替可能であるかをまず検証します
（簡易なアニメーションの組み合わせで実現できそうであればCSSで制御できないか等）
2.1.が難しそうであれば、目標に使用されているライブラリの様々な作例と実装方法を参照して似たものを探し、実装できそうかを判断します
基本は現在の自身の持つ技術で容易に実現（再現）可能であるか？を軸に考え、対象が未習得の技術で構成されているのであればその学習コストや代替技術の選定を天秤にかけるというのを繰り返します
例で示されたサイトであれば、スクロールによる効果も含めた構成になっていますが、例えば求められているのが「ファーストビューのフェードやスライドを用いた効果を画面全体をメインビジュアルにした形で起用したい」だけで「スクロールによるパララクスは不要」だったりなど、要件で必要な要素に分解してしまえばCSSベースや簡単なJavaScriptで再現できそう、と判断する感じです
これが「スクロールによるパララクスも！」となると一体で制御する作りにしないと…となるので技術習得からのスタートになります、頑張るしかないね！