framer-motion
-
[React] framer-motion staggerChildren 사용React 2023. 3. 29. 15:28
framer-motion의 staggerChildren은 variants를 사용할시 자식 컴포넌트 애니메이션의 시차를 둘 수 있다. 예를 들어 stargeChildren이 0.01이면 첫 번째 자식이 0초, 두 번째 자식이 0.01, 세 번째 자식이 0.02 지연된다. const container = { hidden: { opacity: 0 }, show: { opacity: 1, transition: { staggerChildren: 0.5 } } } const item = { hidden: { opacity: 0 }, show: { opacity: 1 } } return ( ) 나의 경우 서버에서 받아온 데이터를 map으로 돌려 각 아이템이 각각 0.5씩 간격을 두고 애니메이션이 되길 바랬지만 적용이..