今回調べるのは ID Verification and Compliance Solutions | Cognito のサイト。
https://cognitohq.com
至るところでイラストが動いている。SVGアニメーションのようだ。
このサイトは、スクリプトファイルが分かれたままになっているので比較的見通しやすい。
<script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script>
<script src="https://cognitohq.com/wp-content/themes/cognito/js/jquery.min.js"></script>
<script src="https://cognitohq.com/wp-content/themes/cognito/js/TweenMax.min.js"></script>
<script src="https://cognitohq.com/wp-content/themes/cognito/js/jquery.scrollstop.min.js"></script>
<!-- select2 list styling -->
<script src="https://cognitohq.com/wp-content/themes/cognito/js/select2.min.js"></script>
<!-- scrollmagic plugin -->
<script src="https://cognitohq.com/wp-content/themes/cognito/js/scrollmagic/minified/ScrollMagic.min.js"></script>
<script src="https://cognitohq.com/wp-content/themes/cognito/js/scrollmagic/minified/plugins/animation.gsap.min.js"></script>
<!-- greensock svg path animations -->
<script src="https://cognitohq.com/wp-content/themes/cognito/js/DrawSVGPlugin.js"></script>
<script src="https://cognitohq.com/wp-content/themes/cognito/js/MorphSVGPlugin.js"></script>
<!-- animated typer plugin -->
<script src="https://cognitohq.com/wp-content/themes/cognito/js/typed.min.js"></script>
<!-- main js -->
<script src="https://cognitohq.com/wp-content/themes/cognito/js/cognito-091919-4.js"></script>
<!-- HelpScout widget -->
<script async src="https://cognitohq.com/wp-content/themes/cognito/js/help_scout.js"></script>いろいろなライブラリが読み込まれている。
- TweenMax（アニメーションライブラリ）
- jquery-scrollstop（スクロールの開始と終了時のイベントを設定できるjQueryプラグイン）
- select2（selectの見た目を調整できる）
- ScrollMagic（スクロール連動のライブラリ）
- animation.gsap.min（ScrollMagic用GreenSockプラグイン）
- DrawSVGPlugin（SVGアニメーション用GreenSockプラグイン）
- MorphSVGPlugin（SVGモーフィングアニメーション用GreenSockプラグイン）
- Typed.js（タイピングアニメーションを実現するjQueryプラグイン）
- Help Scout（オンラインヘルプサービスのプラグイン）
アニメーション周りはTweenMax（GreenSock）を中心にいろいろなプラグインが読み込まれている。
TweenMaxの勉強をしよう。
