Animating with Framer Motion 〜導入編〜

この記事は以前ちょっと株式会社 社員ブログで公開していたものです

Framer Motionとは？

https://www.framer.com/motion/

Framer社が提供するReact向けのオープンソースモーションライブラリです。同社は、社名と同じ名前のインタラクティブデザインツール「Framer」を開発しており、その機能の一部として今回紹介するMotionが提供されています。

宣言的（declarative）なアニメーション

Framer Motionの特徴の一つは、アニメーションを宣言的に書けることです。ここで言う宣言的とは、「jsxのプロパティから直接アニメーションの挙動を制御できる」ことを意味します。

例えば、「x方向に100移動する」アニメーションを実装したい場合、次のように書けます。

<motion.div animate={{ x: 100 }} />

このように、アニメーションの対象となる要素と、その挙動が一目で分かりやすい構文となっています。

セットアップ

本記事ではNext.jsでセットアップしますが、React環境であれば何でも構いません。

yarn create next-app --typescript

Nextのセットアップが完了したら、パッケージを追加します。

yarn add framer-motion

cssはSassを使用しますので、必要に応じてこちらも追加します。

yarn add -D sass

ライブラリを使用する際は、motion変数を読み込み、motion.要素名の形で宣言できます。

initialはアニメーションの初期値、variantなど設定します。

animateにアニメーションで変化する値を指定し、ここでは「不透明度を1、y座標を50から0」を設定しています。

transitionにはアニメーションにかかる時間やeasingについて指定します。

import { motion } from "framer-motion"
import styles from "../styles/index.module.scss";

const Page: NextPage = () => {
	<div className={styles.app}>
	  <motion.div
	    initial={{ opacity: 0 }}
	    animate={{ opacity: 1, y: [50, 0] }}
	    transition={{ duration: 0.8, ease: "easeOut" }}
	  >
	    Hello, framer motion.
	  </motion.div>
	</div>
}

export default Page

index.module.scss

.app {
  background-image: linear-gradient(160deg, #0093e9 0%, #80d0c7 100%);
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 700;
  font-size: 3rem;
  color: #333;
}

開発サーバーで動作確認を行います。

yarn dev

正しく動けば、テキストがふわっと浮き出るのが確認できるかと思います。

これで、セットアップは完了です。

まとめ

紹介したシンプルな機能の他にも、「デザイナーがFramerで作成したComponentをimportして使う」、「3D表現を扱う」といった使い方も可能です。ドキュメントを参考に、プロダクトに合う機能があれば導入を検討してみると良いかもしれません。