발단

이전에 작업했던 코드를 수정하던 중, framer-motion 쪽에서 오류가 발생했다.
그래서 공식문서를 다시 살펴보려고 했는데, 기존에 알고 있던 framer-motion의 공식 문서 웹사이트를 찾을 수 없었다.

그 대신 motion이라는 라이브러리의 웹사이트만 검색되었다.
혹시 framer-motion이 deprecated 된건가 싶어 좀 더 찾아보니, framer-motion이 framer로부터 독립하여 motion이라는 이름으로 새롭게 시작한 것이었다.

Motion이 독립한 이유

Motion의 공식 블로그 글에서는 독립하게 된 이유를 자세히 설명하고 있었다.

Motion은 원래 Popmotion이라는 프로젝트였다. 이를 6년 전에 Framer가 인수하며 Framer-motion이라는 이름으로 발전시켰고, 이후 React 기반 애니메이션 라이브러리로 많은 사랑을 받아왔다.

Framer-motion은 Framer의 성장과는 별개로 그 자체로도 많은 성장을 이뤄내며, React 애니메이션의 표준으로 자리매김했다.

이러한 상황 속에서 Motion의 개발진은 라이브러리의 핵심 방향성을 깊이 고민하게 되었다.
Motion이 Framer의 일부이기는 하나, Motion의 본질은 Framer나 React에 의존하지 않기 때문이었다.

결국 Motion의 개발진은 라이브러리의 미래를 위해 Framer나 React 뿐만 아니라 모든 웹사이트를 대상으로 하는 애니메이션 라이브러리로 나아가기로 결정했다. 이에 따라 Framer는 Motion은 독립시켰고, 동시에 Motion의 첫 번째 스폰서가 되어주었다.

Motion이 되면서 바뀐 점

Motion은 이제 React뿐만 아니라 Vanilla JS에서도 사용할 수 있다.

React에서 사용할 경우 motion/react에서 import하여 사용하면 된다.

import { motion } from "motion/react";

const App = () => {
  return <motion.div animate={{ rotate: 360 }} />
};

물론 vanilla Motion의 기능도 React에서 사용할 수 있다.

import { animate } from "motion";

const App = () => {
  return (
    <>
      <div className="box" style={{ opacity: 0 }} />
      <button onClick={() => animate(".box", { opacity: 1 })}>
        Animate
      </button>
    </>
  )
};

그 외의 사용방법은 기존과 동일하다

>> Motion 공식문서 보러 가기 <<

마치며

이렇게 큰 변화가 있었던 것을 이제야 알게 되다니...
도대체 언제 이런 일이 벌어졌을까 싶어 찾아보니, 불과 한 달 전에 있었던 일이었다.

새삼 프론트의 생태계 변화 속도가 빠르다는 것을 다시금 느낀다. 따라가기가 쉽지 않다..

그래도 Motion의 독립을 계기로, 앞으로 더 많은 환경에서 애니메이션이 얼마나 자유롭고 유연하게 사용될 수 있을지 기대가 된다 ~ ^^)b
화이팅!