react framer-motion 텍스트 효과

이것만으로도 홈페이지 굉장히 풍부해보인다. 진작에 배울 걸.. 아무튼 너무 재밌당.

styled-components 와 같이 사용했다.

yarn add framer-motion

const transition = {
  duration: 0.8,
  ease: [0.6, -0.05, 0.01, 0.9],
}

const textReveal = {
  initial: {
    y: "200%",
    opacity: 0,
  },
  animate: {
    y: "0%",
    opacity: 1,
  },
};

transition 으로 속도를 어떻게 할 지 정한다.
y는 세로방향이고, x는 가로 방향이다.

y를 x로 바꿨을 때 예시이다

그리고 코드를 보면 ,

        <BigText
          variants={textReveal}
          initial="initial"
          animate="animate"
          transition={transition}>
          Front-End
        </BigText>
        <BigText
          variants={textReveal}
          initial="initial"
          animate="animate"
          transition={{ ...transition, delay: 0.5 }}>
          Developer
        </BigText>
        <BigText
          variants={textReveal}
          initial="initial"
          animate="animate"
          transition={{ ...transition, delay: 1.1 }}>
          velog.io
        </BigText>

delay 를 넣어줘서 텍스트마다 지연 시간을 지정해줬다. styled-components를 사용할 때 중요한 점은 styled(motion.div) 를 넣어줘야 한다는 것이다.그럼 간단하게 사용할 수 있다.

const BigText = styled(motion.div)`
  font-size:150px;
  
  :nth-child(1){
    margin-left: 0vw;
}
  :nth-child(2){
      margin-left: 5vw;
  }
  :nth-child(3){
      margin-left: 0vw;
  }

`

전체코드이다.

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

const transition = {
  duration: 0.8,
  ease: [0.6, -0.05, 0.01, 0.9],
}

const textReveal = {
  initial: {
    x: "200%",
    opacity: 0,
  },
  animate: {
    x: "0%",
    opacity: 1,
  },
};

const emojiReveal = {
  initial: {
    opacity: 0,
  },
  animate: {
    opacity: 1,
  },
}

const ExampleText = () => {
  return (
    <Contain>
      <BackgroundImg 
        variants={emojiReveal}
        initial="initial"
        animate="animate"
        transition={{ ...transition, delay: 0.1 }}
        />
      <Wrap>
        <BigText
          variants={textReveal}
          initial="initial"
          animate="animate"
          transition={transition}>
          Front-End
        </BigText>
        <BigText
          variants={textReveal}
          initial="initial"
          animate="animate"
          transition={{ ...transition, delay: 0.5 }}>
          Developer
        </BigText>
        <BigText
          variants={textReveal}
          initial="initial"
          animate="animate"
          transition={{ ...transition, delay: 1.1 }}>
          velog.io
        </BigText>
        <Emoji
           variants={emojiReveal}
           initial="initial"
           animate="animate"
           transition={{ ...transition, delay: 1.6 }}>
          <img src="" alt="emoji" />
        </Emoji>
      </Wrap>
    </Contain>
  )
}
export default ExampleText;


const Contain = styled.div`
  height: 100vh;
  background-color: #fff;
  line-height:920%;
  position:relative;
  z-index:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  overflow:hidden;
`

const BigText = styled(motion.div)`
  font-size:150px;
  
  :nth-child(1){
    margin-left: 0vw;
}
  :nth-child(2){
      margin-left: 5vw;
  }
  :nth-child(3){
      margin-left: 0vw;
  }
`

const Wrap = styled.div`
  margin-top:-70px;
  position:relative;
`

const BackgroundImg = styled(motion.div)`
  width:100%;
  height:100%;
  background-image:url('');
  background-size:cover;
  position:absolute;
`

const Emoji = styled(motion.div)`
  width:100px;
  height:100px;
  position:absolute;
  right:90px;
  bottom:2px;
  img{
    width:100%;
  }
`