[React] framer motion

∙ Framer motion

---

• What is framer motion ?

• 리액트에서 애니메이션을 쉽게 구현할 수 있도록 도와주는 라이브러리.
• Framer motion 문서 참고

---

• How to use framer motion ?

---

• npm i framer-motion

  • 패키지 설치

• motion.{tag}

  • 애니메이션을 사용할 태그 앞에 motion. 을 붙여줘야 framer motion을 사용할 수 있다.

  • <motion.div animate= />

• variants

  • variants를 이용해서 보다 깔끔하고 효율적인 코드를 작성할 수 있다.

  • vairants에 애니메이션 값이 담긴 변수를 전달하여 애니메이션을 실행한다.

  • const item = { hidden: { x: -10, opacity: 0 } }
    <motion.li variants={item} />
    

• drag

  • 드래그 앤 드랍을 구현할 수 있도록 해준다.

• AnimatePresence

  • 리액트만으로는 구현하기 힘든 컴포넌트가 사라질 때 실행할 애니메이션을 설정할 수 있도록 해준다.

  • export const MyComponent = ({ isVisible }) => (
    <AnimatePresence>
        {isVisible && (
        <motion.div
            initial=
            animate=
            exit=
        />
        )}
    </AnimatePresence>
    )
    

• useMotionValue

  • 상태와 중력 값 등을 추적할 수 있도록 해준다.
  • 리액트의 상태와 별개의 값이므로 값이 변해도 리렌더링 하지 않는다.

• useViewPortScroll

  • 스크롤 관련 애니메이션을 구현할 때 자주 사용되는 api 이다.
  • scrollYProgress등을 사용하여 스크롤의 위치를 수치상으로 표현할 수 있다.

• useTransform

  • 어떠한 수치의 범위를 임의적으로 transform 할 수 있게 도와준다.
  • const rotateZ = useTransform(x, [-800, 800], [-360, 360]);

• transition

  • 특정한 컴포넌트를 택하거나 default를 사용해서 애니메이션마다 다른 transition을 실행시킬 수 있다.

---

• Conclusion

• 태그 안에 속성 값을 주는 것 만으로도 다양한 애니메이션을 구현 할 수 있도록 도와주기 때문에 앞으로 자주 사용 할 것 같은 라이브러리.