chot Inc.

ちょっと株式会社 社員ブログ
Blog
  • ホーム
  • ブログ
  • Animating with Framer Motion 〜導入編〜

Animating with Framer Motion 〜導入編〜

ナレッジ・ノウハウ
Animating with Framer Motion 〜導入編〜

SHARE

ちょっと株式会社 フロントエンドエンジニアのnoeです。
今日から、OSSのモーションライブラリ「Framer Motion」について何回かに分けて紹介していきます。第1回は導入編として、概要とセットアップ方法について書いていきます。

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 Motionの導入について取り上げました。アニメーションに関するライブラリはGSAPやAnime.js、react-springなど様々なものがありますが、今回の導入だけではFramer Motionをプロダクションに採用するほどの決定的な根拠までは得られないかと思います。
今後、「デザイナーがFramerで作成したComponentをimportして使う」、「3D表現を扱う」といった機能も紹介していきますので、自身の開発環境に取り入れるにあたって参考になれば幸いです。

noe

フロントエンドエンジニア

関連記事

Copyright © 2022, chot inc.