アニメーションでふわっと浮き出るテキストを実装した | pikocloud - ピコクラウド都城市でWEBシステム開発・ホームページ制作

framer-motion というライブラリを利用して、ふわっと浮き出るテキストを実装していきます。
このコードもしかしたら、どこかから拾ってきたやつかもしれないです…😓

まずはインストールから

$ npm install --save framer-motion

コンポーネント

import { motion, MotionStyle } from 'framer-motion';

export const Animation = ({
  children,
  className,
  style,
  duration,
}: {
  children: React.ReactNode;
  className?: string;
  style?: MotionStyle;
  duration?: number;
}) => {
  return (
    <motion.div
      variants={{
        offscreen: {
          // 画面外の場合のスタイル
          y: 100,
          opacity: 0,
        },
        onscreen: {
          // 画面内の場合のスタイル
          y: 0,
          opacity: 1,
          transition: {
            duration: duration || 1,
          },
        },
      }}
      initial="offscreen" // 初期表示はoffscreen
      whileInView="onscreen" // 画面内に入ったらonscreen
      viewport={{ once: true, amount: 0 }}
      className={className}
      style={style}
    >
      <p>{children}</p>
    </motion.div>
  );
};

呼び出し

import { Animation } from './Animation';

export const Home = () => (
  <Anime>Service</Anime>
)

こんな感じでいいんじゃないかなぁー