pathSpring (1) 썸네일형 리스트형 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 다음