framer-motionを使って テキストアニメーション(iphoneの初期画面に出てきそうなやつ)

はじめに

みなさん、こんにちは torihaziです

最近 Reactを学んでおり、

ちょっと何か作りたいということでタイトルのものを

他の方の記事を参考に作ってみました！！

iphoneの初期設定とかで出てきそうでこなさそうなものです！

よければ！！

環境

# npm -v
10.7.0
# npx -v
10.7.0
# node --version
v20.14.0

"react": "^18.3.1"
"framer-motion": "^11.2.12"
"styled-components": "^6.1.11"

完成イメージ

コード

HelloWorld.jsx

import { motion } from "framer-motion";
import { styled } from "styled-components";

export const HelloWorld = () => {
  const words = "Hello World";

  return (
    <SDiv>
      {words.split("").map((key, value) => (
        <motion.span
          key={value}
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          transition={{
            duration: 0.5,
            delay: value * 0.05,
            repeat: Infinity,
          }}
        >
          {key}
        </motion.span>
      ))}
    </SDiv>
  );
};

const SDiv = styled.div`
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2rem;
`;

App.jsx

import { HelloWorld } from "./components/HelloWorld";
import "./App.css";

export const App = () => {
  return (
    <div className="App">
      <HelloWorld />
    </div>
  );
};

終わりに

framer-motionというものの理解が正直まだまだ浅いですが、

少しづつ積み上げていきたいと思います

プロパティはまだまだいじりがいがありそうです！

使えそうだったらポートフォリオにも使ってみようかと思います！！

参考