[TIL]2022.02.04

2022년 2월 4일

✍ Today

[챌린지] [노마드코더] 리액트 JS 챌린지/Assignment 5: Motion

 

- Framer Motion에서 transform-orgin을 해보았다. transformOrigin: left bottom 을 한 후에 whilehover: scale 효과가 잘 적용되었는데, overlay 애니매이션 후에는 transform-origin이 center로 다시 바뀌었다. 

공식 홈페이지를 찾아보니 framer motion에서 transform origin을 적용하려면 originX, originY, originZ를 사용해야 되는 것 같다.

 <Box
	style={{ originX: 1, originY: 1 }}
	whileHover={{ scale: 1.2 }}
	onClick={() => setId(1)}
	key={1}
	layoutId={1}
 />

이후 위와 같은 방식으로 Box들의 style을 변경해주었더니 overlay motion 적용 후에도 정상적으로 transform-origin이 작동하는 것을 볼 수 있었다.

- transform-origin을 적용한 후 overlay 효과를 주는데 Box가 튀는 현상이 발생하였다. overlay 애니매이션이 실행된 후 다시 Box를 만드는 과정에서 transform-orgin을 적용해주지 않아 발생 되는 문제였다.

			{id === 1 ? (
              <Box
                layoutId={id}
                style={{
                  width: 220,
                  height: 200,
                  backgroundColor: "white",
                  originX: 1,
                  originY: 1
                }}
              />
            ) : id === 4 ? (
              <Box
                layoutId={id}
                style={{
                  width: 220,
                  height: 200,
                  backgroundColor: "white",
                  originX: 0,
                  originY: 0
                }}
              />
            ) : null}

위와 같이 조건문을 활용해 id에 따라 originX, originY를 바꿔주어 문제를 해결할 수 있었다.

 

 

❓ Next 

- 리액트 JS 챌린지를 과제를 할 예정이다.