[React] 진짜 미친 Framer motion이다

<Box>{!clicked ? <Circle /> : null}</Box>
<Box>{clicked ? <Circle /> : null}</Box>

 

이렇게 하면 따로따로 원래 리액트 하던것처럼 작동하던게

 

<Box>{!clicked ? <Circle layoutId="circle" /> : null}</Box>
<Box>{clicked ? <Circle layoutId="circle" /> : null}</Box>

 

layoutId를 동일하게 붙이는 순간 둘사이의 이동으로 연결된다 !!!

 

진짜 Crazy!!!!!  Funking Crazy!!!!!!!!!!!!!

 

---

완성코드

import { motion, AnimatePresence } from "framer-motion";
import { useState } from "react";
import styled from "styled-components";

const Wrapper = styled(motion.div)`
  height: 100vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
`;

const Box = styled(motion.div)`
  width: 400px;
  height: 400px;
  background-color: rgba(255, 255, 255, 1);
  border-radius: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1), 0 10px 20px rgba(0, 0, 0, 0.06);
`;
const Circle = styled(motion.div)`
  background-color: #00a5ff;
  height: 100px;
  width: 100px;
  border-radius: 50px;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1), 0 10px 20px rgba(0, 0, 0, 0.06);
`;

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

export default App;