애니메이션 중복 실행 문제 해결하기

내용

포트폴리오에서 Skills와 Education 섹션에서 스크롤할 때마다 애니메이션이 반복 실행되면서 깜박임 현상이 발생했습니다. 위아래로 스크롤할 때마다 애니메이션이 재시작되어 시각적으로 거슬렸습니다.

원인 분석

// 문제가 있던 코드
<AnimatedSection>
  <motion.div 
    initial={{ opacity: 0, y: 30 }}
    whileInView={{ opacity: 1, y: 0 }}
    // viewport 설정 없음
  >

해결 과정

1차 해결: once: true 설정

<motion.div 
  initial={{ opacity: 0, y: 30 }}
  whileInView={{ opacity: 1, y: 0 }}
  viewport={{ once: true, margin: "-150px" }}
>

2차 개선

한차례만 보이는게 아닌 해당 섹션을 이동할때 마다 보이게 끔 재설정 once: false로 변경하되, 중복 래핑 문제를 해결했습니다.

// AnimatedSection 래퍼 제거하고 개별 애니메이션 적용
{Object.entries(skills).map(([category, skillList], index) => (
  <motion.div
    key={category}
    initial={{ opacity: 0, y: 30 }}
    whileInView={{ opacity: 1, y: 0 }}
    transition={{ duration: 0.6, delay: index * 0.1 }}
    viewport={{ once: false, margin: "-150px" }}
  >

해결 포인트

• 중복 래핑 제거: AnimatedSection과 개별 motion.div가 겹치면서 발생한 충돌 해결
• 적절한 margin 설정: -150px로 애니메이션 트리거 시점 조절

배운 점

Framer Motion을 사용할 때는 컴포넌트 래핑 구조를 신중히 설계해야 합니다. 특히 whileInView를 사용하는 컴포넌트들이 중첩되지 않도록 주의해야 합니다.