React Framer Motion 톺아보기

 

📌 Framer Motion?

Framer Motion 은 React 로 개발된 Animation Library 입니다.

관련된 패키지중에 지속적으로 사용량 및 관심도가 증가하고 있는 추세입니다. 📈

웹앱에서 애니메이션을 다루는 다양한 방법이 있지만,

다양한 환경에서 충분한 성능을 고려하여 구현하기에는 생각보다 고려할 사항이 많고 까다로운 것이 사실입니다.

이번 위클리에서는 이러한 부분에 도움이 될수도 있는 패키지를 소개해보는 시간을 가져보려합니다.

 

npm trends

 

 

📌 TL;DR

Framer Motion 의 특징

 

• TypeScript 지원
• 최적화된 성능 및 풍부한 API
  • physics 기반의 사실적인 transition효과 제공 (spring, tween, inertia)
  • 모던 웹앱에서 반복적으로 필요로 하는 여러 모션들을 간결한 API 로 제공
• 선언적인 애니메이션 코드 구현 (with Component Props, React Hook, Utilities)
• 러닝커브가 동일 카테고리의 타 라이브러리에 비해 낮고 커스텀에 용이함
• (+) Framer ↔ Framer-Motion 간에 적용이 용이함
  • 자동 코드 생성 기능 제공
  • 디자이너가 motion 리액트 컴포넌트를 다루는 시대가 올까?
  • Framer 를 메인 디자인툴로 사용하고 있다면 큰 장점이 될 수도?

 

📌 Framer Motion Quick Tutorial

Framer Motion 구성 요소 뜯어보기

그럼 이제 Framer-Motion 을 구성하는 여러 컴포넌트들을 하나씩 살펴보겠습니다.

 

⚠️ 여기서 모든 API 를 다루지는 않습니다.

 

1️⃣ Animation

Framer-Motion 에서 애니메이션을 구현하는 가장 핵심 컴포넌트는 motion 입니다.

motion 컴포넌트는 표준 HTML 과 SVG 엘리먼트를 모두 구현하고 있으며,

일반적으로 animate 속성으로 원하는 animation 을 지정합니다.

여기에 특정 값이나 keyframe 을 지정할 수도 있습니다.

 

<motion.div 
    animate={{ 
        scale: [1, 2, 2, 1, 1], 
        rotate: [0, 0, 180, 180, 0] 
    }} 
/>

 

animate 의 값이 변경되면 컴포넌트가 알아서 해당 값으로 변화하며 애니메이션 효과를 생성합니다.

기본적으로 motion 은 변화하는 값의 종류에 따라 적절한 transition 효과를 부여합니다.

(예를 들어 x, y 나 scale , rotate 과 같은 physical 속성들은 spring , opacity 나 color 는 tween 효과)

물론 다음과 같이 원하는 효과를 지정할수도 있습니다.

기본적으로 animate 에 지정된 keyframes 들은 고르게 분배된 animation 실행시간을 가지는데,

times 속성을 통해 0~1 초 사이에서 각 프레임별 시작시간을 지정할 수 있습니다.

 

<motion.circle
    cx={500}
    animate={{ cx: [null, 100, 200] }}
    transition={{ ease: 'easeOut', duration: 3, times: [0, 0.2, 1] }}
/>

 

애니메이션의 transition stage 를 추적하고 싶다면,

motion 컴포넌트에서 제공하는 animation event props 을 이용하면 됩니다.

 

<motion.div 
    animate={{ x: 100, opacity: 0 }} 
    onAnimationStart={onStart}
    onUpdate={onUpdate}
    onAnimationComplete={definition => {
    console.log('Completed animating', definition)
  }}
/>

 

또한 motion 컴포넌트는 SSR(ServerSide Rendering) 도 지원합니다.

다만 일부 SVG 컴포넌트의 경우에는 아직까지 완전히 호환되지는 않는다고 합니다.

 

💡 React Tree 언마운트 시에도 애니메이션을 유지하고 싶다면?

특정 컴포넌트가 DOM 트리에서 제거될 때 애니메이션 효과를 유지하도록 처리하는게 까다로울 수 있습니다.

만약 다음과 같이 조건부 렌더링을 사용할 경우 react-transition-group 을 이용하면

애니메이션이 동작하기 전에 컴포넌트가 언마운트되기 때문에 원하는대로 동작하지 않습니다.

 

show && <Popup />

 

Framer-Motion 에서는 이를 위해 AnimatePresence 컴포넌트를 제공합니다.

 

<AnimatePresence>
    {show && <Popup />}
</AnimatePresence>

 

2️⃣ 복잡한 애니메이션 구현을 위한 Variants

하나의 컴포넌트에서 단순한 애니메이션을 구현할 경우에는 animate 속성 하나로 해결이 가능할겁니다.

그런데 만약 애니메이션 트리거가 여러 컴포넌트에 전파되어 복합적인 애니메이션 효과를 구성해야 되는 경우에는 어떻게 할 수 있을까요?

 

이를 위해서 Framer-Motion 은 variants 라는 기능을 제공합니다.

variants 는 부모의 자식 motion 컴포넌트들로 전파(propagation) 되고,

부모 컴포넌트가 자식들의 애니메이션 효과를 적절하게 조율(orchestration)하는 방법을 제공합니다.

 

 

variants 를 동적(dynamic)으로 생성하고 싶다면, custom 속성을 함께 사용하면 됩니다.

 

const variants = {
  visible: i => ({
    opacity: 1,
    transition: {
      delay: i * 0.3,
    },
  }),
}

<motion.li
  custom={i}
  animate="visible"
  variants={variants}
/>

 

그리고 하나의 motion 에서 여러개의 variants 를 지정할 수 있습니다.

이때 각 variants 에서 겹치는 애니메이션 속성이 존재하면, 가장 마지막에 정의된 것으로 지정됩니다.

 

<motion.div variants={['open', 'primary']} />

 

3️⃣ Layout Animation

width , height 등등의 css layout 관련 애니메이션은 주요 성능저하를 일으키는 요소입니다.

Framer-Motion 에서는 이러한 layout 관련 값 변경을 추적하여

transform 기반의 애니메이션을 제공하는 기능을 제공합니다.

 

 

코드를 보면 일반적인 애니메이션 구현에 사용되는 속성이 아니더라도

원하는 transition 이 발생하는 것을 확인할 수 있습니다.

(justify-content 는 현재 스펙상 transitionable 한 속성이 아닙니다.)

 

이처럼, layout 과 관련된 변화가 생기면 re-render 가 발생하면서 적절한 애니메이션 효과가 수행됩니다.

물론 원하는 transition 으로 커스텀도 가능합니다.

 

4️⃣ Gesture Animation

Framer-Motion 은 React 에서 제공하는 기본적인 이벤트를 확장한

hover, tap, pan, viewport, drag 관련 gesture detection system 을 가지고 있습니다.

이들은 모두 motion 컴포넌트와 함께 사용가능하며

whileHover, whileTap, whileDrag, whileInView 등의 helper props 들로 제공됩니다.

이들은 transition prop 으로 구성된 객체를 전달받아 원하는 gesture 효과를 구현하며

두개 이상의 gesture 가 함께 동작될 경우 우선순위에 따라 처리됩니다.

motion 은 이들 gesture 사이에서 알아서 우선순위에 따른 interplay 를 관리합니다.

 

 

5️⃣ Draggable

Framer-Motion 에서는 drag gesture 와 관련된 여러 기능들을 제공하고 있습니다.

컴포넌트에 drag 라는 속성을 부여해주면 draggable 하도록 할 수 있습니다.

drag 범위를 지정하기위해 px 단위로 지정하거나 대상이 될 컴포넌트의 ref 를 전달할 수 있습니다.

 

 

Reorder Group 은 child component 의 key 를 통해 위치 변화를 추적하고,

변화된 순서에 맞는 상태를 onReorder prop 을 통해 업데이트해줍니다.

 

6️⃣ Scroll linked & triggerd Animation

인터렉티브 웹에서는 스크롤 이벤트를 통한 여러 transition 효과들을 구현하기도 합니다.

여기서는 스크롤 정도에 따라 상단 progress bar 를 노출하는 간단한 예시코드입니다.

 

 

7️⃣ Motion Values

모든 motion 컴포넌트는 내부적으로 MotionValue 를 사용하여 animation 의 상태를 관리합니다.

일반적인 경우에는 이 값을 직접 다룰 일이 없지만, 좀 더 복잡한 애니메이션을 구현하기 위해서

직접 이 값을 생성해서 motion 컴포넌트에 주입할 수 있습니다.

이를 통해 animation state 를 설정하거나 참조하여 다른 여러 컴포넌트의 motion 을 동기화시킬 수 있으며

react 의 render cycle 에 관계없이 visual 속성을 업데이트 할 수 있습니다.

 

 

Framer-Motion 에서는 이러한 Motion Value 들을 다루기 위한 여러 react hook 들을 제공해줍니다.

useTransform, useSpring, useVelocity 등으로 특정 Motion Value 에 따라 변화하는

새로운 Motion Value 를 생성하거나, useTime 으로 애니메이션 프레임 단위의 작업을 수행할수도 있습니다.

이외에도 여러 hook 들이 있으니, 필요에 따라 적절한 feature 들을 사용하면 될 것 같네요.

 

8️⃣ Utilities

이외에도 Framer-Motion 에서는 여러 인터렉션 구현에 자주 사용되는

useAnimationFrame, useInView, useDragControls 등의 유용한 custom hook 들을 제공해줍니다.

보다 복잡한 애니메이션 구현이 필요에 한 경우에 활용할 수 있을 것으로 보입니다.

 

📌 styled-component 와 함께 사용하는법

1️⃣ styled-component 를 animatable 하게 바꾸기

styled-component 의 as prop 을 사용하여 Motion 컴포넌트로 렌더링합니다.

 

<MyComponent as={motion.div} animate={{ y: 100 }} />

 

2️⃣ styled-component 로 커스텀한 Framer Motion 컴포넌트 만들기

styled-component 의 스타일을 확장하는 방식을 사용합니다.

 

const MyCustomComponent = styled(motion.div)`
  width: 2rem;
  background-color: tomato;
`;

 

Animate Styled Components with Framer Motion!

Animate Styled Components with Framer Motion!

 

📌 번들사이즈 최적화하기

Framer-Motion 은 온전히 사용할 경우 50kb 이상의 번들 사이즈를 가지는 패키지입니다.

대신 rollup 이나 webpack 과 같은 번들링 툴을 사용한다면, tree-shaking 을 지원하기 때문에,

필요한 컴포넌트만 불러와 사용하면 사이지를 최적화할 수 있습니다.

 

이 패키지의 가장 핵심이 되는 motion 컴포넌트를 포함할 경우 29kb 미만으로는 최적화가 불가능하지만,

만약 motion 컴포넌트와 다르게 모든 애니메이션 기능들을 preload 하지 않는 m 컴포넌트를 사용한다면

초기 렌더링 시 필요한 패키지 사이즈를 4.9kb 까지 줄일 수 있습니다.

(대신 이후에 사용하려는 애니메이션 feature 에 따라 로드하는 패키지 사이즈가 달라지겠죠)

 

LazyMotion & m 으로 번들 사이즈 최적화하기

앞서 말했듯이, motion 은 모든 애니메이션 feature 를 preload 합니다.

따라서 우리가 사용하지 않는 것들까지 포함해서 불러오게됩니다.

대신에 LazyMotion 을 통해서 필요한 feature 를 담은 animation set 을 로드하는 방식을 사용합니다.

 

<LazyMotion features={domAnimation}>
  {children}
</LazyMotion>

 

여기서 사용가능한 animation set 은 현재 다음 두가지 입니다.

이부분은 추후에 버전 업그레이드에 따라 보다 세분화될 가능성이 있어보이네요.

(Framer-Motion 의 메인 feature 단위로 쪼개지지 않을까요?)

• domAnimation : animations, variants, exit animations, tap/hover/focus gestures (+15kb)
• domMax : 모든 feature 포함 (+25kb)

 

유의할 점은 LazyMotion 을 motion 과 함께 사용할 경우, motion 의 preload 때문에

LazyMotion 을 사용하는 모든 이점이 없기 때문에,

m 컴포넌트를 사용하도록 강제할 수 있는 strict 옵션이 있습니다.

 

<LazyMotion strict features={domAnimation}>
  <motion.div />
</LazyMotion>

 

LazyMotion 에 strict 설정을 하고 motion 을 렌더링하려고 하면, 다음과 같은 에러가 발생합니다.

 

 

따라서 LazyMotion 을 사용할 경우에는 strict 설정을 강제하는 것이

번들링 사이즈 최적화를 위해 더 나은 방향이라고 보이네요.

 

📌 마무리

이 패키지를 사용해보며 느낀 장점은 다음과 같습니다.

 

1. declarative animation code
2. 애니메이션 관련코드를 분리해서 관리가 가능합니다. (관심사 분리)
3. 간결하고 명확한 Rich API
   1. 복잡한 애니메이션을 보다 쉽게 구현할 수 있어보입니다.
   2. 구현하기 까다로운 physics 기반의 사실적인 transition 효과를 제공합니다.
4. 친절한 문서와 지속적인 업데이트
   1. 최근 PR 들을 보면 animation timeline 관련 기능들이 개발중인 것 같습니다.
5. 디자인 툴인 Framer 와 함께 사용하면 디자이너와의 협업에 좀 더 도움이 되지 않을까?
   1. 디자인과 프로덕션과의 간극이 좀더 손쉽게 좁혀질 수 있는 좋은 도구가 될 수 있을 것 같습니다.

 

다만 유의할 사항도 몇가지 있습니다.

 

1. 우선 용량이 큰 편이다.
   1. 대신 필요한것만 가져다 쓰며 tree-shaking 도 지원하기에 어느정도 보완 가능할 듯합니다.
   2. 그렇기에 가볍고 단순한 애니메이션을 구현하고자 하는 것이라면 굳이,,?
      1. 근데 앱 내에 많은 애니메이션이 있다면, 이걸로 관리하는 것도 유지보수에 좋을 것 같습니다.
2. 해당 패키지를 사용하는 방법을 별도로 익혀야합니다.
   1. 근데 사용법이 어려운 것은 아니라서 큰 단점으로 보이지는 않습니다.
   2. 오히려 통일된 코드로 유지보수에 도움이 되지 않을까요?
3. 자체 애니메이션 효과를 제공하는 외부 컴포넌트 (chart, drag&drop 등) 와의 호환성은?
   1. 필요하다면 다른 컴포넌트와 결합하여 사용하는 방법 있는지 찾고, 그럴만한 가치가 있는지 생각해볼 필요가 있을 것 같습니다.
   2. 다만 이미 자체적인 방식으로 제공한다면, 굳이 해당 컴포넌트에도 적용할 필요는 없어 보이네요.
4. SSR 을 지원하지 않는 일부 SVG 컴포넌트들이 있습니다.
   1. 해당 svg 컴포넌트를 직접 사용할 일이 없다면 당분간 큰 문제는 아닐듯 합니다.

 

지속적으로 관리되며 발전하고 있는 패키지인만큼, 개발 생산성을 위해 눈여겨 볼만하지 않을까요?

우선 일부 프로젝트에 실험적으로 도입해봐도 좋을 것 같습니다.

 

여러분들의 의견이 궁금하네요!