Javascriptモリモリ書くのは難しい私。
そんな中でも、クライアントさんや代理店さんからは
- カッコイイアニメーションを提案してほしい
- 見た目で競合と差がほしい
といった要望をちょくちょく頂きます。
…わかります。聴こえてきます、デザイナー界隈からのお声。
なぜそれが必要なのか、話し合いたい😇
デザインの本質ではないですよね。
根拠の無いアニメーションや根拠の無いデザイン。
でも、案件によっては、企画や会議に携わることなく、デザインも他社が作成、コーディングだけの依頼を頂いたときに既にこの状況なこと、あります😅
つべこべ考えず、できることを精一杯するのだ。（と、考えるしかない）
そんなとき、いつも助けられているのがアニメーションに特化したJavascriptライブラリ「GSAP」です。
公式サイトを見れば、おおよそどんなことができるか想像できると思います。
公式ドキュメントは英語ではあるものの、基本的にサンプルコードを拾えば十分活用できます。
また、年々日本語で解説してくれるブログも増えてきています。
お手軽にサイトにリッチなアニメーションを実装することができます。
なんだかカッコイイ、それだけでも喜ばれたり、次に繋がったり、します😇
何より、作業中自分が楽しい、というのはあります😆
目次
GSAPではスクロールに連動してアニメーション制御ができる
現実的にWEBサイトで利用頻度が高いのは、スクロールに連動したアニメーションかと思います。
サンプルを見たほうが早いと思うので、今回は私がよく使う4つの方法をご紹介します。
CodePenを貼り付けるので、触ってみてください。
GSAPでよく使うスクロールアニメーション
画像のパララックス
See the Pen Untitled by キャッスル (@ytgrivsz-the-animator) on CodePen.
少し古めのiPhoneやWindowsPCで、「カクつく」と言われることがちょくちょくあります。機能として優先順位が高いものではないので、クライアントさんなどからこの要望を頂く場合は、即、削除します😅
経験上、もがいても解消できた試しがありません😅😅
アニメーション自体が向かない案件もあると思いますが、特にパララックスは提案に注意が必要です。
表示領域に入ったらフェードイン
See the Pen GSAP-scroll-02 by キャッスル (@ytgrivsz-the-animator) on CodePen.
こちらは、以前はjQueryや他のプラグインを使用していたのですが、
どうせGSAPを読み込むことが多いので、GSAPに1本化してシンプルにしました。
表示領域に入ったらクラスを付与する部分のみGSAPで設定、
アニメーション内容はCSS上で設定しています。
好みかと思いますが、細かい表示調整はCSSの方が個人的にはやりやすいので〜。
スクロール量とアニメーション量を連動させる①
See the Pen GSAP-scroll-03 by キャッスル (@ytgrivsz-the-animator) on CodePen.
GSAPらしい使い方で気に入っています😆
CSSマスクの値をスクロール量に応じて変化させます。
強調したい画像に使うと、印象的に見せることができます。
スクロール量とアニメーション量を連動させる②
See the Pen GSAP-scroll-04 by キャッスル (@ytgrivsz-the-animator) on CodePen.
こちらもGSAPらしい使い方😆
タイムラインを使用すれば、CSSのプロパティを順々に変化させることができます。
（上記では、「filter: blur」の変化が終わったあとで、「filter: grayscale brightness」が変化します。）
さらにさらに、タイムラインを2つ走らせることで、CSSのプロパティ毎に、変化率を与えることができます。
（上記では、「filter」の変化と同時に、「scale」を変化させています。それぞれアニメーションの終了位置を異なる値にしています。）
「filter」を変化させるアニメーションは、写真の鮮やかさを強調したいときなど、使い所ですね😊
番外編：慣性スクロールをプラスしてより世界観を出す
最近気になっている「Lenis.js」。
何しろ、サイトの手の3Dモデルが頭に焼き付いて印象的😆
今のところ、Windowsで慣性スクロール機能を追加するためだけに、控えめの設定で使用しています。
Macユーザーには変化のない部分ですが、クライアントがWindowsでチェックする方メインなので、クライアントにとってはインパクトのある機能です。
慣性スクロールの使い所は注意が必要ですが、GSAPと組み合わせることで、より印象的なスクロールアニメーションを演出できます。
アニメーションはこのjsで付けたことがないのですが、見た感じ、GSAPと似たような設定はできそうです👀
そして使用事例で掲載されているサイト「DeSo」がゴリゴリWebGLですごいのです😊💦
WebGL使ってみたくてうずうずさせる面白いサイト。
CodePen上では、既にjQueryとGSAPに関するjsは既に読み込んでいます。
・jquery.min.js
・gsap.min.js
・ScrollTrigger.min.js