framer-motion (2) 썸네일형 리스트형 리엑트, state로 컴포넌트를 넣었다 뺄 때 부드러운 렌더링을 하는 법(framer-motion) 1. 문제 리엑트에서는 state를 이용해서 컴포넌트를 렌더링하거나 없애는 경우가 흔하다. 이 과정에 컴포넌트의 생성과 제거 애니메이션을 넣어주면 유저와의 상호작용이 더 매끄럽게 이뤄진다. 이는 framer-motion 같은 라이브러리를 이용하면 쉽게 해결되지만, 문제는 아래처럼 "주변의 다른 컴포넌트들이 레이아웃에 영향을 받는 경우"다. HTML 삽입 미리보기할 수 없는 소스 이런 경우, 주변 컴포넌트는 매끄럽지 않게 레이아웃이 변경된다. 이런 문제는 어떻게 해결할 수 있을까. 아래처럼 3가지 방법이 있다. HTML 삽입 미리보기할 수 없는 소스 2. height animation 제일 처음 문제 삼은 예시는 animation으로 transform: scaleY()를 조작했다. 따라서, 컴포넌트 마운트.. framer-motion 라이브러리, path-spacing, path-offset 기능은 뭘까(추측) 1. 글의 목적 framer-motion은 리엑트에서 컴포넌트에 애니메이션을 넣는 라이브러리다. 그 중, svg의 path에 애니메이션을 넣는 방법이 있는데, 이 중에서 path-spacing, path-offset의 기능이 무엇인지 알기 어려웠다. 공식 문서에서도 별 다른 설명이 없고, 구글링을 해봐도, chat GPT에게 물어봐도 만족할만한 답변이 없어서 내 식대로 정리해본다. 두 속성을 넣는 방법은 공식문서에 있으니 자세한 설명은 생략한다. 아래에서는 두 속성값에 의해 애니메이션이 어떻게 바뀌는지 살펴본다. 2. path-spacing 아래 예시를 보자 HTML 삽입 미리보기할 수 없는 소스 솔직히 보고도 잘 감이 안잡힌다... 확실한건, 1일 때는 기존 것과 별반 차이가 없다. 반면, 0.5에서는.. 이전 1 다음
