[Framer motion] width

프로젝트에서 Framer motion을 사용해 햄버거 메뉴바를 만드려고 한다.

Framer motion의 example안의 햄버거 바가 딱 좋을 것 같아서 이용 하기로 했다. 

Framer Motion: Variant - CodeSandbox

바로 이 example 인데 이 예제에는 여기서는 알 수 없지만(혹은 컨텐츠가 없으니 일부러 안고친것 같지만) 한 가지 버그가 있다. 

바로 햄버거 메뉴가 클릭될때 나오는 메뉴가 click 되지 않아 보이지 않아도 사실 살아 있다는 것이다. 즉 투명인 채로 컨텐츠들을 방해한다는 것이다. 

 

Framer Motion: Side menu (forked) - CodeSandbox

 

위의 예제를 보면 햄버거 메뉴를 자식으로 하는 fixed인 header는 z-index를 검정색 버튼보다 높게 주었다. z-index를 높게 주지 않으면 검정색 버튼이 햄버거 메뉴를 클릭 했을때 나오는 메뉴 위에 나오기 때문이다.  

이제 검정색 버튼을 누르려하면 눌리지 않는다. 오히려 햄버거 메뉴가 클릭되지 않았는데 햄버거 메뉴의 내용들이 클릭되는것을 볼 수 있다. 

이유는 우리 눈에는 햄버거 메뉴가 꺼져 있지만 사실 요소로써 남아있는 것이다. 

이를 해결하려면 animation을 적용할때 햄버거 메뉴가 클릭될때는 visiabe하고 꺼질때는 display none을 적용 시켜야한다. 

그럼 적용 시켜보자

Framer Motion: Side menu (forked) - CodeSandbox

 

display 부분이 적용이 안된 모습을 볼 수 있다. 이럴때 바로 AnimatePresence가 필요하다.