AWESOME AI MOTION
효과Effects / UI 시연UI Demo / Nº 332

드래그 앤 드롭Drag and Drop

Drag and Drop
드래그 앤 드롭
다른 이름Also known as · Cursor drag · 커서 드래그 · Cursor Drag · Drag and drop demonstration · 드래그 놓기 시연
332
도판Fig. 332. 드래그 앤 드롭 · Drag and Drop · power2.inOut
재생 속도Speed

커서가 요소를 집어 들어 반투명 복사본과 이동하고 새 위치에 놓는다.Lift a translucent copy, carry it with the cursor, and settle it in a new slot.

01

무엇을 전하나What it tells

전달 효과ConveysCONVEYS
옮기기, 순서 바꾸기, 크기 변경을 보여준다.Shows ownership, relocation, and a clear drop result.
언제 쓰나Use whenUSE WHEN
  • 목록 순서를 바꾸는 제품 시연
  • 파일을 드롭 영역으로 옮기는 안내
  • Demonstrate list reordering.
  • Guide a file into a drop zone.
과용 주의AvoidAVOID
  • 이동 중 원본과 복사본을 모두 불투명하게 두지 않는다
분류TagsTAGS
UI 시연UI Demo순서·흐름Sequence설명 영상Explainer video제품 시연Product demo웹 UIWeb UI난이도 중급Intermediategsap
02

좋은 예와 나쁜 예Good and bad use

좋은 사례GOOD

커서와 반투명 카드가 320px 이동한 뒤 카드가 새 슬롯에 정착한다

과용 · 나쁜 사례OVERUSE

커서가 카드보다 먼저 도착해 무엇을 옮기는지 알 수 없다

03

파라미터Parameters

기본값은 클립에 쓴 값Defaults are the values used in the clip

항목PARAM기본DEFAULT범위RANGE메모NOTE
들기160ms100~220ms이동 전 잡는 동작
확대1.051.02~1.08원본 기준 배율
복사본 투명도0.650.5~0.8드래그 중 상태
이동800ms600~1200ms320px 이동 기준
놓기250ms180~350ms최종 슬롯 정착
GSAP
tl.to('.ghost', {scale:1.05, opacity:0.65, duration:0.16}, 0);
tl.to(['.cursor','.ghost'], {x:320, y:120, duration:0.8, ease:'power2.inOut'}, 0.16);
tl.to('.ghost', {scale:1, opacity:1, duration:0.25}, 0.96);
라이브 소스 열기Open live source소스 코드SourceREADME
04

에이전트 프롬프트Agent prompts

그대로 붙여 넣는다Paste as is

Claude Code

<파일>의 <대상>에 드래그 앤 드롭을 적용한다. 복사본의 시작 좌표를 커서와 맞추고 320px, 120px 이동 후 최종 슬롯에 놓는다. 초기 상태를 명시한 paused 타임라인으로 만들고 고정 좌표와 시간만 사용해 seek를 재현한다.

Apply Drag and Drop to <target> in <file>. Align the copy with the cursor, move both by 320px and 120px, then settle the copy in the destination slot. Define the initial state and use a paused timeline with fixed coordinates and timings for repeatable seeking.

Codex

<파일>에서 <대상>의 드래그 앤 드롭 장면에 적용한다. 복사본의 시작 좌표를 커서와 맞추고 320px, 120px 이동 후 최종 슬롯에 놓는다. 0.30초·0.79초·1.41초 시점을 캡처해 시작 상태, 중간 관계, 최종 정착과 겹침 여부를 확인한다.

Implement Drag and Drop in the scene for <target> in <file>. Align the copy with the cursor, move both by 320px and 120px, then settle the copy in the destination slot. Capture at 0.30s, 0.79s, 1.41s to verify the initial state, intermediate relationships, final settling, and unwanted overlap.

05

도구별로 쓰기In your tools

HyperFrames · ReelForge · Scrolline

HyperFramesVIDEO · GSAP
paused 타임라인에 드래그 앤 드롭의 초기 상태와 종료 상태를 함께 기록하고 1.21초까지 seek로 재현한다.
ReelForgeBRIEF TO VIDEO
씬 워커 브리프에 드래그 앤 드롭 대상 선택자와 들기 160ms, 확대 1.05, 복사본 투명도 0.65를 싣고 최종 상태 유지 시간을 지정한다.
Scrolline DeckSCROLL SCRUB
진행률 0~1을 1.21초 구간에 매핑하고 scrub에서는 스프링 대신 power3.out으로 위치를 계산한다.
06

잘 맞는 조합Pairs well with

커서 이동과 클릭 · Cursor Move & Click
Nº 315커서 이동과 클릭Cursor Move & ClickCursor Move & Click
레이아웃 재배치 · Layout Reflow
Nº 343레이아웃 재배치Layout ReflowLayout Reflow
07

출처Sources

개념 출처와 라이선스. 구현은 이 레포에서 새로 씀Concept sources and licenses. Implementations are original to this repo