forEach안에서 gsap을 사용할 때 이벤트가 한번밖에 안걸리는 문제

안녕하세요 안미혜님 :)

해당 코드에서 html에 .box가 여러개가 있나요?

html에 .box가 여러개가 있다면 각각의 박스들을 클릭했을 때 해당 아이템에게 클릭이벤트와 애니메이션이 개별적으로 적용되는게 맞습니다.

1. 같은 대상 (.box가 한개인 경우) 에게 하나의 클릭이벤트를 여러개 거는것과

2. 여러개의 대상 (.box가 여러개일 경우) 에게 클릭이벤트를 각각의 대상에게 거는건 다른 문제입니다.

만약 하나의 대상 (1번과 같이)에게 대상을 클릭했을 때 애니메이션이 여러번 실행되고 싶으신 거라면 이벤트를 한번만 걸고 토글의 형태로 코드를 만들어 애니메이션을 제어해 주셔야 합니다.

예시코드)

const box = document.querySelector('.box');

let toggle = false;

box.addEventListener('click',()=>{

  if(!toggle){
    gsap.to(box,{rotation: 360 }) 
  }else{
    gsap.to(box,{rotation: 0 }) 
  }

  toggle = !toggle
  
})

해당 코드는 삼항 연산자식으로 변경하면 보다 깔끔하게 처리할 수 있습니다.

    const box = document.querySelector('.box');

    let toggle = false;

    box.addEventListener('click',()=>{

      gsap.to(box,{rotation: !toggle ? 360 : 0}) 
      
      toggle = !toggle
      
    })

여기서 클로저를 사용한다면 보다 안전하게 변수를 관리할 수 있습니다.

    const box = document.querySelector('.box');

    

    
    function boxAnimation(){
      let toggle = false;

      return ()=>{
        gsap.to(box,{rotation: !toggle ? 360 : 0}) 
        toggle = !toggle
      }
      
    }

    box.addEventListener('click',boxAnimation())

더 나아가 IIFE(Immediately Invoked Function Expression) 패턴과 함수 표현식을 사용한다면 보다 깔끔하게 핸들러 함수를 작성할 수 있습니다.

  const box = document.querySelector('.box');

    

    
    const boxAnimation = (()=>{
      let toggle = false;

      return ()=>{
        gsap.to(box,{rotation: !toggle ? 360 : 0}) 
        toggle = !toggle
      }
      
    })()

    box.addEventListener('click',boxAnimation)

감사합니다 :0