기본적인 적용

yonghee·2022년 5월 23일
0
import React from 'react';
import styled from "styled-components"
import { motion } from "framer-motion";
const Wrapper = styled.div`
  height: 100vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
`;

const Box = styled(motion.div)`
  width: 200px;
  height: 200px;
  background-color: #3e9b79;
  border-radius: 15px;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1), 0 10px 20px rgba(0, 0, 0, 0.06);
`;

const Box2 = styled(motion.div)`
  width: 200px;
  height: 200px;
  background-color: #3e9b79;
  border-radius: 15px;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1), 0 10px 20px rgba(0, 0, 0, 0.06);
`;

function App() {
  return (
    <Wrapper>
      <Box transition={{ duration : 3 }} animate={{ borderRadius: "100px" }}/>
      <Box2
      transition={{ duration : 1 , type: "spring"}}  //tween 기본적으로 탑재 되어 있는 스프링 모션을 없앨 수 있다.
      initial={{ scale: 0 }} //initial : 애니메이션의 초기 스타일 // animate : 애니메이션의 최종 스타일
      animate={{ scale : 1, rotateZ: 360 }} />   
    </Wrapper>
  );
}

export default App;

기본적인 설정 코드만 발췌해서 보면

const Box2 = styled(motion.div)
styled-components를 사용할시에는 이렇게 motion.div라 적어주고 
<Box2
transition={{ duration : 1 , type: "spring"}} 
      //tween 기본적으로 탑재 되어 있는 스프링 모션을 없앨 수 있다.
initial={{ scale: 0 }} 
      //initial : 애니메이션의 초기 스타일
animate={{ scale : 1, rotateZ: 360 }} /> 
	// animate : 애니메이션의 최종 스타일
   
profile
필요할 때 남기는 날것의 기록 공간

0개의 댓글