Zenn
🎞️

【超初心者向け】Framer Motionを使ってみよう

2024/10/16に公開
React
Tailwind CSS
初心者向け
FramerMotion
tech

導入

こんにちは。みなさんはFramer Motionなるものをご存知でしょうか？
私もちょっと前に知って、非常にハマっているので、React、Tailwindcss等の所謂モダン技術に触れ始めた方に向けて、基礎的な部分に焦点を当てて紹介していきます。
https://www.framer.com/motion/

そもそもFramer Motionとは

Framer MotionはReact用の簡単で直感的な操作でアニメーションをつけることのできる便利なライブラリのことです。記述の仕方が分かりやすいことが特徴で読みやすく、書きやすいです。Tailwindcssのアニメーション深掘るのめんどくせと思った人でも、その辺のコードがわからない人でもすぐにスパッと理解できます。

主な使用技術

  • React
  • Tailwindcss
  • Framer Motion

環境構築

その前に...

インストールの前に動かす対象を作成します。
現在作成中のプロダクトがある方はそれを使っていただいても構いません。
今回は初期状態のいらない部分を消したReactから説明を開始します。

App.tsx
import './App.css'

function App() {

  return (
    <div className='flex justify-center'>
       <div className='w-[170px] h-[170px] bg-red-500'></div>
    </div>
  )
}

export default App

記述が完了したらローカルサーバーを立ち上げて赤色の四角形が現れたら成功です。

Framer Motionの環境構築

npm install framer-motion

インストールが完了したら、編集するページにimportしましょう。

App.tsx
+ import { motion } from "framer-motion"

const App = () => {
  return (
    <div className='flex justify-center'>
      <div className='w-[170px] h-[170px] bg-red-500'></div>
    </div>
  )
}

export default App

これで準備完了です。

図形を動かしてみる

お待たせしました。では実際に四角形を動かしていきましょう。
まず、アニメーションをさせたい要素のタグにmotionと書き加えましょう。
今回は、<motion.div></motion.div>という形になります。
ついでに後のためにインデントも整えておきましょう。

App.tsx
import { motion } from "framer-motion"

const App = () => {
  return (
    <div className='flex justify-center'>
      <motion.div 
        className='w-[170px] h-[170px] bg-red-500'>
      </motion.div>
    </div>
  )
}

export default App

intial

アニメーションの動き出す初期位置を決めるのがintialです。
後のanimateでもそうですが、基本framer motionではx,y(0,0)px座標で動きを考えます。
そして画像をはじめに置いた場所が(0,0)になります。今回は真上にある四角を下げてみましょう。
座標の記述は{{x: 00, y: 00}}といった具合です。今回のようにx,yひとつでも構いません。

App.tsx
<motion.div 
        initial={{ y: 250 }}
        className='w-[170px] h-[170px] bg-red-500'>
</motion.div>

四角が下に降りてきているなら成功です。

animate

次にアニメーションの終了する位置を決めていきます。
先ほどと同じ記述方法で書いていきます。試しに右にずらしてみましょう。

App.tsx
 <motion.div 
        initial={{ y: 250 }}
        animate={{ x: 250 }}
        className='w-[170px] h-[170px] bg-red-500'>
</motion.div>

右にシュバっと動いたら成功です。

transition

動いたは動いたのですがこれだと動きもアニメーションの終了も早すぎて取り回しが悪いですよね。
そんな時に使うのがtransitionというわけです。様々な機能があるので今回は2種類に絞って紹介します。

transition-delay

その名の通りアニメーションの開始を遅らせることができます。
animateの下に追加で書いてみましょう。

App.tsx
　transition={{ delay: 2 }}

ページをリフレッシュしてみましょう。
これでアニメーションが2秒待ってから動くことではっきり一部始終が見られましたね。

transition-duration

今度はアニメーションの速度を調節しましょう。
同じtransitionの値に書き加えていきましょう

App.tsx
- transition={{ delay: 2 }}
+ transition={{ delay: 2, duration: 2 }}

ゆっくり動くようになって見やすくなりました。完成です！
これでそれっぽいアニメーションができました！

終わりに

今回作ったアニメーションはframer motionの一歩目にすぎません。
さらに新しい機能を加えていけばモダンなサイトが作れるようになります。
繰り返しのtransition-repeatやhoverしたときのアニメーションwhileHoverを加えてもいいですね。色々な機能やデザインを試行錯誤する中で直感的に様々なアニメーションを使いこなしていきましょう！

Discussion