🌊

Reactで動きを出そう!Framer Motion入門(1)

2023/11/18に公開

Reactで動きを出そう!Framer Motion入門(1)

はじめに

この記事では、Reactのアプリケーションにアニメーションを加える方法として、Framer Motionというライブラリの基本的な使用方法について解説します。Framer Motionは、直感的で簡単に扱えることが特徴です。

Framer Motionの特徴

Framer Motionは、React専用に作られたアニメーションライブラリです。宣言的な記法でアニメーションを設定できるため、Reactのコンポーネント指向と非常に相性が良いです。

基本的な使い方

ステップ1: インストール

Framer Motionを利用するにはまず、npmを通じてインストールします。

npm install framer-motion

ステップ2: コンポーネントの作成

Framer Motionを使うには、motionをインポートし、HTMLタグの代わりにmotionプレフィックスを使用します。

import { motion } from 'framer-motion';

function MyComponent() {
  return <motion.div animate={{ x: 100 }} />
}

この例では、divが100ピクセル右に動きます。

簡単なアニメーション例

フェードイン

<motion.div
  initial={{ opacity: 0 }}
  animate={{ opacity: 1 }}
/>

このコードは、透明度を0から1に変化させることでフェードインを実現します。

まとめ

Framer Motionは、Reactでアニメーションを加える際の強力なツールです。本記事では、基本的な使い方と簡単なアニメーション例を紹介しました。このライブラリを使って、アプリケーションに動きを加えてみましょう

参考

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

Discussion