なぜFramerMotionを止めてGSAPを使い始めたか
以前は、Reactとの相性の良さからFamerMotionというライブラリを使おうとしていたのだが、販売されているチュートリアルが非常に高いのと、実際にウェブデザインで使えそうなデザインのサンプルが不足しているので使うのをやめて。Vanilla JavaScriptのライブラリであるGSAPというライブラリを使い始めた。
チュートリアルに利用している有料リソース
現在進めているのが下のビデオチュートリアルで、非常に丁寧に初歩的なところから解説してくれるものの12800円とやや高額である。でもアニメーションはスキルとしてアピール出来るのに情報が限られているので、良心的な値段のほうだろう。
https://vwlab.io/products/web-animations
買ったけれどもまだ使用してないリソース
始めから、実践的なサンプルで試したほうが良いかと思って、下のサイトにも12800円ぐらいを支払ったのだが、GSAPの基礎知識がないとさっぱり理解出来ないコードであった。しかも返金を受け付けられないと書いてあるので、一応、返金リクエストをしたが無理だろう。コレクションと呼ばれる支払いをするとソースが見られるサンプル集があって、その出来はなかなか現代的で良いと思う。でも30コレクションで1万を越える値段というのはかなり高い。今後、コレクションが増えてくれることを期待するしかない。AWWARDSのベストサイトに選らばれていたぐらい、ホームページのアニメーションは良く出来ているので、つい買ってしまった。
https://madewithgsap.com/
コーディング環境
最近はHTMLとCSSとJavaScriptのような定番の組み合わせにも、ソースを書いてVSCodeのLiveServerプラグインのようなもので結果を見るのではなく、Astroフレームワークを使っている。なぜかというと、ASTROはReactと同様にコードをコンポーネント化出来るので、いくつもサンプルを作っていく時に別々のコンポーネントにして、indexページコンポーネントで読み込めば早いからだ。ViteはESLintにひっかかるようなconfigファイルを生成するので、すっかり使わなくなってしまった。ASTROはコンポーネントにReactやVue,Svelateをサポートしてるうえに、とても記述が簡単なAstro独自の定義方法も使えるようになっている。これを使うと静的サイトジェネレータを使う時のようにページを簡単にパーシャルつまり、部分部分に分けて再利用可能な形で作成出来る。Next.jsのような大規模なサイト向きのフレームワークほどの機能が必要ない個人で作るレベルのページ数のサイトの場合はASTROのほうが向いている。なぜかというとAstroのほうがNext.jsより高速に動作するからだ。まあ、結局のところはアニメーションを使うとなるとクライアントサイドレンダリングが必要なわけで、サーバーサイドフレームワークによる差は僅かかもしれない。それでもNext.jsのアップルーターよりもAstroのpageコンポーネントのほうが全部page.jsxにしないといけないという問題がないので気軽に使いやすい。（AstroでGSAPを使う際の注意点：クライアントレンダリングを使うのでページ上部の---ラインで区切られた欄にJavaScriptは記述出来ない。DOMの問題があるので、ページの下部に<script>タグを追加してやれば、普通のHTMLと同様にDOMにコンポーネント内からでもアクセス出来る。DOMを全て読み込むのを待つためにトップページ<script>タグを書かないといけないということはない、そこら辺は賢く作られているようである）
結論のようなもの
まあ、とにかくデザインの引出しが増えるのは良いことだけど、もっとランディングページのデザインをいくつもFigmaで作ってTailwind CSSでコーディングをして人に見せられるウェブページを増やしたいという思いはある。でも、そこにアニメーションが加わったらより魅力的だろう。そんな思いで、今までちゃんと勉強してこなかったウェブアニメーションに挑戦を始めた。
追記
ページのフォントをニューセザンヌからshorai-sansに変えた。このカナに癖のない新ゴのようなフォルムはなかなかつかえるんじゃないだろうか。新ゴはあまりにも使われすぎていて安っぽいイメージがついてしまっているように私は感じている。1100円の費用は毎月払わないといけないが、ダウンロードされるフォントの文字数が技術的に使用している文字だけに限られるので、デザインにウェブフォントが反映されるのが早く、そのメリットは十分に感じる。将来的に作るページは基本的にfont-plusのサービスのフォントを使う予定だ。その後、4/3にたづがね角ゴシックに変えました。このフォントも非常に美しいゴシック体フォントで、Frutigerに合うようにデザインされたそうです。
