[Gatsbyで構築]JavaScript初心者がGatsbyでサイトを作る勉強 – アニメーション編

JavaScript初心者が、GatsbyJSを使ってウェブサイトを作る勉強です。
なぜGatsbyを使うことになったかは置いておいて、Gatsbyで楽しく開発をするためのメモです。

アニメーションをさせたい

スクロールするたびに何かが動きまくったり、少しづつコンテンツが表示されるようなサイトはあまり好きではないけど、要所要所にアニメーションを使うことは視覚効果が高いと感じるので、今回はアニメーションを勉強します。

どこにどうやってつかう？

たとえば、スクロール時に全体のどの程度スクロールしたかとか、注目してもらいたい部分をぶるるっと動かしたりとかをしたいのです。あとは、写真を入れ替えたりとか。執筆時点ではそんな感じです。

使用するライブラリはFramer-Motion

色々と調べる中で、react-animationが簡単そうだったので使ってみたのですが、いまいち気楽に使えなかったのでもう少し調べてみると、react-poseというものが出てきました。サンプルをほんの少し触ってみるとなかなか気楽に使えそうだったので、本腰を入れてドキュメントを読もうと思ったときに見つけたのが、deprecatedの文字。勉強し始めて早々にdeprecatedしたライブラリを使い続けるのも嫌なので、後継であるFramer-Motionというライブラリを使うことにしました。

Framer-Motion公式サイト
リンク先の左側メニューに「Examples」というのがあるので、そちらからサンプルを確認できます。
また、CodeSandboxへのリンクもあるので実際に触ってみることもできます。

インストール

インポート

「useViewportScroll」のように、Hookを使うことができます。Hookについて詳しくはこちらをご覧ください。

サンプルを動かしてみる

Gatsby starterのgatsby-starter-defaultをインストールして使ってみます。

gatsby-starter-defaultをインストールしたら、index.jsに

を追加します。

次に


<motion.div
      className="box"
      animate={{ scale: 2 }}
      transition={{ duration: 0.5 }}
/>


を追加します。
どこに追加してもいいのですが、とりあえず「h1」の上に追加しました。

追加したものには公式サイト上のサンプルに「className=”box”」を追加してます。さらに、スタイルシートを用意して「.box」のスタイルを記入します。そうしないと何も表示されません。

.box{
  background-color: blue;
  border-radius: 30px;
  width: 100px;
  height: 100px;
}

これで角が丸い四角形が描画されます。再読み込みすると、この四角形がにゅるっと大きくなると思います。
変な位置に表示されると思いますが、今回は自分のファイルに挿入することがメインなので、にゅるっとしたアニメーションが表示されたらよしとします。

今回は

としましたが、

とすることで、囲まれた「TEST」がアニメーションされます。

プロパティーを変えてみる

となっている部分の、「scale」の値を変更するとサイズが変わります。
「duration」を変更すると速度が変わります。

こんな感じで簡単にアニメーションができるFramer-Motionを使って、開発中のサイトに色々と効果をつけていきたいと思います。

まとめ

気楽にアニメーションが使えるようになりました。公式サイトにあるように、ほかにも色々楽しいエフェクトがあります。しかも、簡単に使うことができます。アニメーションのハードルが少し下がった気がします。

とはいえ、表示位置等のデザイン面をコーディングするにはCSSも上手に扱わないといけないので、そのあたりも調べつつやっていこうと思います。