Layout 프로퍼티

• CSS 변화로 인해 움직임이 있는 요소에 layout 프로퍼티를 추가하면 자동으로 애니메이션이 동작합니다.

Shared Layout Animation

• 두 개의 컴포넌트가 연결되어 있다고 Framer Motion 에 알려주면 자동으로 애니메이션이 동작합니다.
• layoutId 프로퍼티 사용
• 예시

function App() {
  const [clicked, setClicked] = useState(false);
  const toggleClicked = () => setClicked((prev) => !prev);
  return (
    <Wrapper onClick={toggleClicked}>
      <Box>
        {!clicked ? (
          <Circle style={{ borderRadius: 50 }} layoutId="circle" />
        ) : null}
      </Box>
      <Box>
        {clicked ? (
          <Circle style={{ borderRadius: 0, scale: 2 }} layoutId="circle" />
        ) : null}
      </Box>
    </Wrapper>
  );
}

참조

Framer Motion Docs
리액트 마스터클래스, 노마드코더