[javascript] 자바스크립트와 GreenSock을 이용한 드래그 앤 드롭 효과를 사용한 타임라인 구현 방법

29 Nov 2023

javascript

최근 웹 애플리케이션에서는 다양한 인터랙티브한 효과를 구현하기 위해 드래그 앤 드롭 기능이 많이 사용됩니다. 특히, 타임라인 구현은 사용자 경험을 향상시키는 데 중요한 역할을 합니다. 이번 글에서는 자바스크립트와 GreenSock 라이브러리를 이용하여 드래그 앤 드롭 효과를 사용한 타임라인을 구현하는 방법을 알아보겠습니다.

GreenSock 라이브러리란?

GreenSock(GSAP)는 웹 애니메이션을 위한 강력하고 유연한 자바스크립트 라이브러리입니다. 다양한 애니메이션 효과를 구현할 수 있으며, HTML 요소의 위치, 크기, 회전 등을 조작할 수 있는 기능을 제공합니다.

드래그 앤 드롭 기능 구현하기

드래그 앤 드롭 효과를 구현하기 위해서는 먼저 드래그 가능한 요소를 만들어야 합니다. 이 예제에서는 HTML의 div 요소를 드래그 가능한 요소로 사용하겠습니다.

<div id="draggable" style="position: absolute; width: 100px; height: 100px; background-color: blue;"></div>

위의 코드에서 draggable이라는 ID를 가진 div 요소가 드래그 가능한 요소입니다. 이제 자바스크립트를 사용하여 드래그 앤 드롭 기능을 구현해보겠습니다.

// 드래그 시작 시 실행할 함수
function startDrag(event) {
  // 드래그할 요소의 초기 위치를 저장합니다.
  event.dataTransfer.setData("positionX", event.clientX - event.target.offsetLeft);
  event.dataTransfer.setData("positionY", event.clientY - event.target.offsetTop);
}

// 드래그 중 실행할 함수
function drag(event) {
  // 드래그 중인 요소의 위치를 업데이트합니다.
  event.target.style.left = (event.clientX - parseInt(event.dataTransfer.getData("positionX"), 10)) + "px";
  event.target.style.top = (event.clientY - parseInt(event.dataTransfer.getData("positionY"), 10)) + "px";
}

// 드래그 종료 시 실행할 함수
function endDrag(event) {
  // 드래그를 종료합니다.
  event.preventDefault();
}

// draggable 요소를 찾아서 드래그 기능을 추가합니다.
var draggable = document.getElementById("draggable");
draggable.addEventListener("dragstart", startDrag, false);
draggable.addEventListener("drag", drag, false);
draggable.addEventListener("dragend", endDrag, false);

위의 자바스크립트 코드에서 startDrag, drag, endDrag 함수는 각각 드래그 시작, 드래그 중, 드래그 종료 시 실행되는 함수입니다. dragstart, drag, dragend 이벤트를 이용하여 각각의 함수를 호출하고, 드래그 중인 요소의 위치를 업데이트하여 원하는 위치로 이동시킵니다.

타임라인 구현하기

드래그 앤 드롭 효과를 사용하여 타임라인을 구현하기 위해 GreenSock 라이브러리를 활용하겠습니다. 이를 위해서는 GreenSock의 Draggable 클래스를 사용하여 드래그 가능한 요소를 만들고, 해당 요소의 위치를 조작하여 원하는 타임라인 효과를 구현합니다.

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/Draggable.min.js"></script>

먼저 GreenSock 라이브러리를 HTML에 추가합니다.

// 드래그 가능한 요소를 생성합니다.
var draggable = new Draggable("#draggable", {
  onDrag: updateTimeline,
  onRelease: playTimeline
});

// 타임라인을 생성합니다.
var timeline = gsap.timeline({
  paused: true
});

// 타임라인에 애니메이션을 추가합니다.
timeline.to("#draggable", {
  x: 200,
  duration: 1,
  ease: "power1.out"
});

// 드래그 중인 요소의 위치를 업데이트하고 타임라인을 업데이트합니다.
function updateTimeline() {
  timeline.progress(draggable.pointerX / window.innerWidth);
}

// 드래그를 종료하면 타임라인을 재생합니다.
function playTimeline() {
  timeline.play();
}

위의 자바스크립트 코드에서는 Draggable 클래스를 사용하여 draggable 요소를 드래그 가능한 요소로 만들었습니다. onDrag 이벤트를 이용하여 드래그 중인 요소의 위치를 업데이트하고, onRelease 이벤트를 이용하여 드래그 종료 시 타임라인을 재생합니다.

타임라인은 gsap.timeline 함수를 사용하여 생성하고, to 메소드를 이용하여 타임라인에 애니메이션을 추가합니다. 위의 예제에서는 #draggable 요소를 200픽셀 오른쪽으로 이동하는 애니메이션을 추가했습니다.

결론

위의 예제를 통해 자바스크립트와 GreenSock을 이용하여 드래그 앤 드롭 효과를 사용한 타임라인을 구현하는 방법을 알아보았습니다. GreenSock은 다양한 웹 애니메이션 효과를 구현할 수 있는 강력한 라이브러리이며, 드래그 앤 드롭 기능과 같은 상호작용을 통해 사용자 경험을 향상시킬 수 있습니다.