컴포넌트 및 요소가 hover 시 크기가 커지고, 클릭 시 화면 중앙에 나타나는 애니메이션이 포함된 코드를 구현하고자 했다.
다만, 컴포넌트/요소의 animate/transform 중심, 즉 transform-origin이 중앙이 아니라는 점이 발목을 잡았다.
transformOrigin
x축, y축에 대해 0%~100% 사이 값을 지정해 어느 위치를 기준으로 transform을 적용할 지 설정할 수 있다.
framer-motion을 사용해서 애니메이션을 구현하는 중에 transformOrigin이 원하는 대로 설정이 되지 않았다.
오류가 발생한 이유
framer-motion의 layout을 함께 사용중이라면 transform-origin이 동적으로 계산되어 적용된다고 한다.
layout 애니메이션을 올바르게 적용하기 위해서 수정되지 않는 것이었다.
originX, originY
originX와 originY, 혹은 originZ는 layout에 추가로 추가적인 transform사항을 적용할 수 있게 도와준다.
사용법
transform-origin과 사용법은 마찬가지이나 %로 나타내는 것이 아닌 0~1 사이 값을 할당하는 방식이다.
ie
<motion.div style={{ originX: 0.5 }} />!important
framer-motion을 사용하지 않은 다른 프로젝트를 검토하다가 마찬가지로 동작하지 않는 현상을 발견했다. 여기서는 originX와 같은 스타일을 적용할 수 없어서.. !important를 붙여 강제성을 부여했다.
코드를 위에서부터 아래로 읽어내려가기에, 같은 속성을 여러 번 정의했을 경우 이전에 설정한 값에 덮어씌워지기 때문에 발생했을 가능성이 크다.
속성값 뒤에 !important 를 붙이게 되면 해당 속성을 우선순위로 취급하게 된다.
div {
transform-origin: 0% 100% !important;
}참고
https://www.framer.com/motion/component/##transform-origin
https://github.com/framer/motion/issues/733
