Framer Motion を使ってテキストをホバーで切り替える

Framer Motion を使って、テキストをホバーしたときに別のテキストに切り替える方法を紹介します。ホバー時にテキストがスムーズに変わるアニメーションを追加することで、視覚的に楽しさや興味を引きやすくすることができます。

以下のテキストをマウスオーバーすると文字が切り替わります。グローバルナビゲーションで、たまに見かけるエフェクトですね。

実装環境

• React
• Framer Motion

Framer Motion の公式ページはこちら: Framer Motion

インストール

まずは Framer Motion をインストールします。

テキストホバーで別のテキストに切り替える

以下のコードでは、ホバーすることでテキストが別のテキストに変わるアニメーションを Framer Motion を使って実装しています。SwapText コンポーネントに initialText と hoverText のプロパティを渡して、それぞれホバー前とホバー後のテキストを指定します。

ソースコードの解説

このコードでは、motion.div を使ってテキストがホバー時に切り替わるアニメーションを設定しています。SwapText コンポーネントは、初期テキストとホバーテキストの 2 つのテキストを縦に並べた構造になっていて、ホバーした際に上下に動くことで、テキストが切り替わるような視覚効果を実現しています。

motion とは何か？

motion は Framer Motion におけるアニメーション可能な要素を作成するためのコンポーネントです。motion.div のように使うことで、通常の HTML 要素にアニメーションを簡単に追加できます。

プロパティの解説

initial

initial プロパティは、アニメーションが開始される前の初期状態を設定します。この例では、y: 0 として、ホバーしていない状態でのテキストの位置を設定しています。

whileHover

whileHover プロパティは、ホバーされたときにどのようなアニメーションを実行するかを指定します。この例では、y: "-50%" として、ホバーされたときに 2 つ目のテキストが表示されるようにしています。

variants

variants は、initial や whileHover などの状態をまとめて管理するためのオブジェクトです。initial や hover の状態ごとにアニメーションを定義することで、状態の切り替えを簡単に表現できます。

transition

transition プロパティは、アニメーションの速度や緩急を設定します。duration: 0.5 でアニメーションの長さを 0.5 秒にし、ease: "easeInOut" でスムーズに変化するように設定しています。

まとめ

Framer Motion を使うことで、ホバー時にテキストを切り替えるようなインタラクティブなアニメーションを簡単に実装できます。ユーザーがホバーしたときに変化することで、興味を引きつける効果があり、ページに遊び心を加えることができます。