GSAP(GreenSock Animation Platform)는 JavaScript로 작성된 애니메이션 라이브러리로, 강력한 기능과 성능을 제공합니다. 이를 활용하면 마우스 인터랙션과 이벤트 애니메이션을 더욱 쉽고 효과적으로 구현할 수 있습니다. 이번 포스트에서는 GSAP를 사용하여 마우스 인터랙션과 이벤트 애니메이션을 구현하는 방법에 대해 알아보겠습니다.

1. 마우스 인터랙션

마우스 인터랙션은 사용자의 마우스 움직임에 따라 웹 요소가 반응하는 기능을 의미합니다. 이를 구현하기 위해 GSAP의 on 메소드를 사용할 수 있습니다. on 메소드는 특정 이벤트에 따라 웹 요소를 애니메이션하는 기능을 제공합니다.

마우스 움직임에 따른 요소 애니메이션

const element = document.getElementById('myElement');

// 마우스 움직임에 따라 요소 애니메이션
function onMove(event) {
  // 사용자의 마우스 위치
  const mouseX = event.clientX;
  const mouseY = event.clientY;

  // 요소의 위치
  const elemX = element.getBoundingClientRect().left;
  const elemY = element.getBoundingClientRect().top;

  // 움직일 거리 계산
  const distanceX = mouseX - elemX;
  const distanceY = mouseY - elemY;

  // 요소 애니메이션
  gsap.to(element, {
    x: distanceX,
    y: distanceY,
    duration: 0.3
  });
}

// 이벤트 리스너 등록
document.addEventListener('mousemove', onMove);

위 코드에서는 mousemove 이벤트에 대한 이벤트 리스너를 등록하여, 마우스 움직임이 감지될 때마다 onMove 함수가 호출되어 요소를 애니메이션합니다. 마우스의 위치와 요소의 위치를 계산하여 움직일 거리를 결정한 후, GSAP의 to 메소드를 사용하여 애니메이션을 적용합니다.

2. 이벤트 애니메이션

이벤트 애니메이션은 사용자의 특정 동작이나 이벤트에 따라 웹 요소가 애니메이션되는 기능을 의미합니다. GSAP는 이를 간편하게 구현할 수 있도록 다양한 메소드를 제공합니다.

버튼 클릭에 따른 요소 애니메이션

const button = document.getElementById('myButton');
const element = document.getElementById('myElement');

// 버튼 클릭에 따라 요소 애니메이션
function onClick() {
  gsap.to(element, {
    opacity: 0,
    duration: 0.3,
    onComplete: () => {
      // 애니메이션 완료 후 요소 숨김
      element.style.display = 'none';
    }
  });
}

// 이벤트 리스너 등록
button.addEventListener('click', onClick);

위 코드에서는 click 이벤트에 대한 이벤트 리스너를 등록하여, 버튼 클릭 시 onClick 함수가 호출되어 요소를 애니메이션합니다. GSAP의 to 메소드를 사용하여 애니메이션을 적용하고, onComplete 콜백 함수를 사용하여 애니메이션이 완료된 후에 요소를 숨깁니다.

마무리

GSAP를 활용하면 마우스 인터랙션과 이벤트 애니메이션을 더욱 쉽고 효과적으로 구현할 수 있습니다. 위에서 소개한 예제 코드를 기반으로 웹 페이지에 적용하여 독특하고 흥미로운 인터랙션과 애니메이션을 만들어보세요. GSAP 공식 문서와 다양한 예제를 참고하면 보다 다양하고 창의적인 애니메이션을 구현할 수 있습니다.

참고: GSAP 공식 문서