프레이머 모션으로 멋진 텍스트 애니메이션을 만드는 방법

이 자습서의 비디오는 다음과 같습니다.

안녕 인터넷,
이 블로그에서는 framer-motion 으로 텍스트 애니메이션을 만듭니다.

이 블로그에서는 Next.js를 사용할 것이지만 모든 React 프로젝트에 대해 이것을 따를 수 있습니다.

따라서 시작하려면 먼저 Next.js 및 tailwindcss을 사용하여 framer-motion 앱을 설정해야 합니다.

터미널에서 다음 명령을 실행합니다.

npx create-next-app my-project
cd my-project

완료되면 tailwindcss 및 framer-motion을 추가할 예정입니다.

tailwind CSS의 경우 이 가이드를 따라 설정하세요. - https://tailwindcss.com/docs/guides/nextjs
framer-motion의 경우 다음 명령을 실행할 것입니다.

npm i framer-motion

완료되고 설정되면 시작하여 텍스트에 애니메이션을 적용해 보겠습니다.

단어별로 텍스트 애니메이션

component/AnimatedTextWord.js 아래에 새 구성 요소를 만들 것입니다.

import React from "react";
const AnimatedTextWord = ({ text }) => {
// This will split the text into an array of word 
const words = text.split(" ");

  return (
    <div>
      {words.map((word, index) => (
        <span key={index} style={{ marginRight: "5px" }}>
          {word}
        </span>
      ))}
    </div>
  );
};

export default AnimatedTextWord;

jsx

모든 것을 화면 중앙에 맞추기

구성 요소의 베어본을 생성한 후 index.js 페이지에 추가해 보겠습니다.
pages/index.js

import AnimatedTextCharacter from "../component/AnimatedTextCharacter";
import AnimatedTextWord from "../component/AnimatedTextWord";

export default function Home() {
  return (
    <div className="container h-screen mx-auto flex flex-col items-center justify-center">
      <AnimatedTextWord text="animated text with framer-motion" />
    </div>
  );
}

이제 텍스트 애니메이션을 시작하겠습니다.

다음으로 해야 할 일은 텍스트 요소에 동작을 추가하는 것입니다.

우리는 framer-motion의 변형을 사용하여 visible 및 hidden의 두 가지 상태를 가질 것입니다.
hidden - 요소의 초기 상태
visible - 요소의 최종 상태

그런 다음 framer-motion는 이러한 상태 사이에 애니메이션을 만드는 마법을 부릴 것입니다.

코드는 다음과 같습니다.

import React from "react";
import { motion } from "framer-motion";

const AnimatedTextWord = ({ text }) => {
  const words = text.split(" ");

// Variants for Container of words.
  const container = {
    hidden: { opacity: 0 },
    visible: (i = 1) => ({
      opacity: 1,
      transition: { staggerChildren: 0.12, delayChildren: 0.04 * i },
    }),
  };

// Variants for each word.

  const child = {
    visible: {
      opacity: 1,
      x: 0,
      transition: {
        type: "spring",
        damping: 12,
        stiffness: 100,
      },
    },
    hidden: {
      opacity: 0,
      x: 20,
      transition: {
        type: "spring",
        damping: 12,
        stiffness: 100,
      },
    },
  };

  return (
    <motion.div
      style={{ overflow: "hidden", display: "flex", fontSize: "2rem" }}
      variants={container}
      initial="hidden"
      animate="visible"
    >
      {words.map((word, index) => (
        <motion.span
          variants={child}
          style={{ marginRight: "5px" }}
          key={index}
        >
          {word}
        </motion.span>
      ))}
    </motion.div>
  );
};

export default AnimatedTextWord;

요소에 모션을 추가하면 다음과 같이 됩니다.



이제 우리는 애니메이션 텍스트를 단어별로 가지고 있습니다.
letters 에 대한 애니메이션을 빠르게 추가해 보겠습니다.

동일한 작업을 수행할 것이지만 이제 텍스트를 단어 대신 문자로 분할하고 word 애니메이션에 추가한 일부 스타일을 제거하여 각 단어의 왼쪽에 여분margin을 추가할 것입니다.
components/AnimatedTextCharacter.js -

import React from "react";
import { motion } from "framer-motion";

const AnimatedTextCharacter = ({ text }) => {
// splitting text into letters
  const letters = Array.from(text);

// Variants for Container
  const container = {
    hidden: { opacity: 0 },
    visible: (i = 1) => ({
      opacity: 1,
      transition: { staggerChildren: 0.03, delayChildren: 0.04 * i },
    }),
  };

// Variants for each letter
  const child = {
    visible: {
      opacity: 1,
      x: 0,
      y: 0,
      transition: {
        type: "spring",
        damping: 12,
        stiffness: 100,
      },
    },
    hidden: {
      opacity: 0,
      x: -20,
      y: 10,
      transition: {
        type: "spring",
        damping: 12,
        stiffness: 100,
      },
    },
  };

  return (
    <motion.div
      style={{ overflow: "hidden", display: "flex", fontSize: "2rem" }}
      variants={container}
      initial="hidden"
      animate="visible"
    >
      {letters.map((letter, index) => (
        <motion.span variants={child} key={index}>
          {letter === " " ? "\u00A0" : letter}
        </motion.span>
      ))}
    </motion.div>
  );
};

export default AnimatedTextCharacter;

이제 AnimatedTextCharacter 페이지에 index.js를 추가하기만 하면 됩니다.

import AnimatedTextCharacter from "../component/AnimatedTextCharacter";
import AnimatedTextWord from "../component/AnimatedTextWord";

export default function Home() {
  return (
    <div className="container h-screen mx-auto flex flex-col items-center justify-center">
      <AnimatedTextWord text="animated text with framer-motion" />
      <AnimatedTextCharacter text="animated text with framer-motion" />
    </div>
  );
}

이제 우리는 두 애니메이션을 갖게 될 것입니다.

결론

그게 내가 당신을 위해 가진 전부입니다! 바라건대, 새로운 것을 배웠고 나중에 이 애니메이션을 사용하여 자신의 웹 사이트에 활기를 불어넣을 수 있기를 바랍니다!

남은 하루도 즐겁게 보내세요👋


이 기사가 마음에 드셨다면 다른 사람들도 찾을 수 있도록 ❤️를 해주세요.

더 많은 콘텐츠를 보려면 다음에서 연락하십시오.

저에게 연락하십시오:

Portfolio | Github | |