Reactでframer-motionを使って簡単なテキストアニメーションをしてみた

テキストアニメーションを実装してみたい！

ローディング画面や説明文で、おしゃれにテキストアニメーションが施されていることがありますよね！

同じようにおしゃれなテキストアニメーションをサッと作れるといいですね。

作るもの！

アニメーションを作るには

もちろんCSSで適用することもできますが、せっかくならReactのライブラリを使ってみようと思います。

Reactでアニメーションを作る際には、framer-motionとreact-springが有名なようです。

今回は framer-motionを使ってテキストアニメーションを作っていきたいと思います。

作り方

1. framer-motionをインストールする
2. テキストアニメーション用のコンポーネントを作ります！
3. framer-motionを用いて、テキストアニメーションを作る

①framer-motionをインストールする

npm install framer-motion

②テキストアニメーション用のコンポーネントを作ります！

簡単な雛形を作っておきましょう！

③framer-motionを用いて、テキストアニメーションを作る

まずはアニメーションを作る前に、仕組みから考えていきます。

アニメーションさせたい文章を一文字ごとに分割する。
マップ関数で１つずつ取り出して、後の文字の方ほどより遅れるようにする。

テキストアニメーションはこのような仕組みだと思います。
では実際に作っていきましょう！

アニメーションさせたい文字を定義して、分割する

//テキストアニメーションさせたい文字
const words = "Hello World!"
//分割する
const word = words.split("")

アニメーション部分を作る

const textanimate = word.map((word, index) => {
        return (
            <motion.div
                initial={{ opacity: 0}}
                animate={{ opacity: 1}}
                transition={{ duration: 0.5, delay: index * 0.05 }} key={index}>{word}
            </motion.div>
        )
    })

これはマップ関数で文字ごとにアニメーションされるようにします。

opacityの値が最初からアニメーション時で0〜１になることでふわっと出てくるアニメーションを実装できます。

また、delayの値に引数であるindexを足すことによって、後ろの文字ほど遅れて出てくるようなアニメーションを実装することができるのです！

↓全体のコードはこちら

import { motion } from 'framer-motion'
import React from 'react'


export default function First() {
    const words = "Hello World!"
    const word = words.split("")

    const textanimate = word.map((word, index) => {
        return (
            <motion.div
                initial={{ opacity: 0}}
                animate={{ opacity: 1}}
                transition={{ duration: 0.5, delay: index * 0.05 }} key={index}>{word}
            </motion.div>
        )
    })

  return (
    <div className='flex justify-center'>
        {textanimate}
    </div>
  )
}

まとめ

このように、framer-motionを用いて簡単にテキストアニメーションを作ることができました！

今回はふわっと一文字ずつ同様に出てくるテキストアニメーションでしたが、一文字ずつ異なるアニメーションを指定したりすることで、より高度なテキストアニメーションを作ることもできそうですね。