👷
framer-motionでふわっと出現するコンポーネントを実装する
ファンタラクティブのエンジニアの 太田 です。
スクロールして画面内に入るとふわっと出現するコンポーネントを作るのにframer-motionを使用してみたので紹介します。
React (Next) を使用しています。
やること
スクロールすると下から上に、透明から不透明にふわっと表示するコンポーネントをReactとframer-motionを使用して実装します。
デモ
コード
親
<motion.div
variants={{
offscreen: { // 画面外の場合のスタイル
y: 100,
opacity: 0,
},
onscreen: { // 画面内の場合のスタイル
y: 0,
opacity: 1,
transition: {
duration: 0.5,
},
},
}}
initial="offscreen" // 初期表示はoffscreen
whileInView="onscreen" // 画面内に入ったらonscreen
viewport={{ once: false, amount: 0 }}
>
<p>{children}</p>
</motion.div>
viewport.amountを0にすることで画面内に少しで要素が入るとアニメーションが発火します。
子要素も同様の処理を行っていますが、左から順番にアニメーションを実行したいのでdelayを追加で指定しています。
子
<motion.div
variants={{
offscreen: {
...
},
onscreen: {
...
transition: {
...
delay, // propで指定
},
},
}}
initial="offscreen"
whileInView="onscreen"
viewport={{ once: false, amount: 0 }}
>
<p>{children}</p>
</motion.div>
実装してみた感想
- ちょっとしたアニメーションなら深い知識がなくてもわりと簡単
- intersectionObserverを使って実装するより楽そう
- アニメーションの知識があればそこそこ複雑なアニメーションもできそう
- framer-motionのドキュメント充実してるように見えるけど探しづらい気が、、
ユーザーファーストなサービスを伴に考えながらつくる、デザインとエンジニアリングの会社です。エンジニア積極採用中です!hrmos.co/pages/funteractive/jobs
Discussion