트러블 슈팅/framer-motion

문제height가 100vh인 컴포넌트를 여러개 렌더링하여 onViewportEnter로 뷰포트 감지를 하였는데 마운트 시에 한 개만 뷰포트에 감지되는 것이 아닌 두 개의 컴포넌트가 뷰포트에 감지됨으로써 뷰포트에 감지되었을 때 애니메이션을 작동하려는 의도와는 다르게 코드가 동작함 해결방안react-intersection-observer 라이브러리를 사용하여 뷰포트 진입을 보다 정확하게 감지하여 해결했다.간단히 요약하자면 해당 라이브러리를 사용해 컴포넌트가  뷰포트 50%이상 진입 시 뷰포트 감지로 간주하여 문제를 해결했다 초기 렌더링 시 0번째와 1번째 페이지의 애니메이션이 모두 실행되는 이유는, 두 컴포넌트가 뷰포트에 동시에 노출되기 때문일 수 있습니다. 특히, 스크롤 스냅이 적용된 경우 뷰포트의 크기..
순코딩
'트러블 슈팅/framer-motion' 카테고리의 글 목록