so woon!

학습일 : 2023. 05. 11 이번엔 이걸 만들어 보도록 하겠다. hover시 z축을 기준으로 90도가 회전되고 크기가 조금 커지고 클릭 (tap) 했을 경우 크기가 원래대로 돌아오고 원이 된다. import { styled } from "styled-components"; import { motion } from "framer-motion"; // style 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; backg..

학습일 : 2023. 05. 11 Variants 을 사용하게 되면 1. 코드가 깔끔해짐 2. 많은 애니메이션들을 하나로 연결시켜줌 Variant란 비유하자면 내 애니메이션의 stage(무대)이다. 예를 들면, initial이 있을 수도 있고 showing, hidden, from, to, 0%, 100% 등등 내가 원하는 무엇이든 될 수 있다. 이 variant를 자바스크립트 오브젝트에 넣어 작성해주도록 한다. 이름은 자유롭게 지어주고 적용해주면 된다. const myVars = { // 초기상태 - start라고 이름 지어 주겠음 // 이전의 코드에서 initial 부분을 이쪽으로 옮겨주겠음. start : { scale: 0 }, // 최종 상태 - end라고 이름 지어 주겠음 // 이전의 코드에서..

학습일 : 2023. 05. 11 애니메이션을 시작하는 방식을 명시하려면 initial이라는 Prop을 사용하면 되는데 initial 안에는 내가 원하는 element의 초기상태를 작성해주면 된다. 그리고 transition을 적어주고 안에 원하는 트랜지션을 주고 animate prop도 전달하는데 이건 애니메이션의 최종 스타일을 작성해주면 된다. import { styled } from "styled-components"; import { motion } from "framer-motion"; // style const Wrapper = styled.div` height: 100vh; width: 100vw; display: flex; justify-content: center; align-items:..

학습일 : 2023. 05. 10 Framer Motion 사용을 위해 install npm install framer-motion 사용방법을 간단하게 정리하자면 설치 후 import 해주고 평소에 쓰던 HTML 태그 앞에 motion. 을 붙여주면 된다. 이렇게 그리고 기존의 스타일링 할 때 const Box = styled.div` ... `; 이렇게 작성해주던 것을 const Box = styled(motion.div)` ... `; 이렇게 만들어주면 된다. 이제 prop을 전달해볼건데 animate, transition을 전달해주고 안에 css 속성을 적어주도록 한다. import { styled } from "styled-components"; import { motion } from "fram..