✍️ What I Learned/트러블슈팅
[트러블슈팅] Chrome에서 React framer-motion 애니메이션이 어설프게 작동하는 문제
Chrome, React, TypeScript, Framer-motion 왼쪽이 크롬이고 오른쪽이 사파리이다. 둘은 같은 코드이다. gif라서 프레임 드랍이 있는걸 감안하더라도 오른쪽 사파리에서는 사각형이 scale이 커지면서 한바퀴 완전하게 돌아가는 애니메이션인 반면, 크롬에서는 뭔가 감칠맛나게 살짝 또잉 튕기기만 할뿐 scale과 rotate 애니메이션이 제대로 작동하지 않는 것을 볼 수 있다. gif의 첫번째 상자와 두번째 상자를 비교해서 보면, 첫번째 rotate뿐만 아니라 두번째 orchestration 애니메이션도 어딘가 엉성하다. orchestartion: 부모 요소와 자식 요소들의 애니메이션이 딜레이되며 자연스럽게 이어지는 variants 사파리에서는 위에서 아래로 약간의 튕기는 느낌까지 ..
