드래그 앤 드롭(Drag and Drop)은 웹 애플리케이션에서 많이 사용되는 기능 중 하나입니다. 이 기능을 통해 사용자는 요소를 마우스로 클릭하고 드래그하여 원하는 위치로 이동시킬 수 있습니다.

GSAP(GreenSock Animation Platform) 라이브러리는 JavaScript를 기반으로 한 HTML5 애니메이션 도구로써, 웹 애플리케이션에서 강력한 애니메이션 효과를 만들 수 있게 도와줍니다. 이번 블로그 포스트에서는 GSAP를 사용하여 드래그 앤 드롭 애니메이션을 구현하는 방법을 알아보겠습니다.

1. GSAP 설치하기

GSAP를 사용하기 위해서는 먼저 GSAP를 설치해야 합니다. npm을 사용하여 GSAP를 설치할 수 있습니다.

npm install gsap

2. 드래그 앤 드롭 요소 만들기

먼저 HTML 파일에 드래그 앤 드롭을 적용할 요소를 추가해야 합니다. 예를 들어, <div id="drag-drop-element"> 요소를 만들겠습니다.

<div id="drag-drop-element">
  드래그 앤 드롭
</div>

3. GSAP로 애니메이션 추가하기

GSAP를 사용하여 드래그 앤 드롭 애니메이션을 적용하기 위해 JavaScript 코드를 작성합니다. 먼저, GSAP를 import하고 애니메이션을 추가할 요소를 선택합니다.

import { Draggable } from "gsap";

const element = document.getElementById("drag-drop-element");

다음으로, GSAP의 Draggable.create() 메서드를 사용하여 요소에 드래그 앤 드롭 기능을 추가합니다.

Draggable.create(element, {
  type: "x,y", // 드래그 축 설정
  onDrag: function () {
    // 드래그 중에 수행할 로직 작성
  },
  onRelease: function () {
    // 드롭 시 수행할 로직 작성
  },
});

위의 코드에서 onDrag와 onRelease 콜백 함수를 사용하여 드래그 앤 드롭 중에 수행할 로직과 드롭 시에 수행할 로직을 작성할 수 있습니다.

4. 애니메이션 효과 추가하기

GSAP를 사용하면 드래그 앤 드롭 요소에 애니메이션 효과를 추가할 수 있습니다. 예를 들어, 드래그 앤 드롭 중에 요소가 살짝 확대되는 효과를 추가하는 코드는 다음과 같습니다.

Draggable.create(element, {
  // ...
  onDrag: function () {
    const scale = 1.1; // 살짝 확대할 크기
    gsap.to(element, {
      scale: scale,
      duration: 0.3,
    });
  },
  onRelease: function () {
    gsap.to(element, {
      scale: 1, // 원래 크기로 돌아가도록 설정
      duration: 0.3,
    });
  },
});

위의 코드에서 gsap.to() 메서드를 사용하여 요소의 scale 속성을 변경하여 확대/축소 효과를 줄 수 있습니다.

5. 결론

GSAP를 사용하여 드래그 앤 드롭 애니메이션을 만드는 방법을 알아보았습니다. GSAP의 강력한 애니메이션 기능을 활용하면 다양한 웹 애플리케이션에 동적이고 매끄러운 애니메이션 효과를 적용할 수 있습니다.

더 많은 GSAP 기능과 사용 예시를 알고 싶다면 GSAP 공식 문서를 참고하시기 바랍니다.