❮ Previous Next ❯

GSAP Draggable Plugin (Drag, Swipe & Throw)

  • Draggable plugin lets you create smooth drag, swipe, and throw interactions with mouse or touch using GSAP.

  • Introduction

    Draggable is a GSAP plugin that allows you to drag elements using mouse or touch with smooth animation and full control.

    It is commonly used for:

    • Sliders & carousels

    • Drag-and-drop UI

    • Swipe interactions (mobile)

    • Games & interactive dashboards

    Draggable is an official plugin from GreenSock GSAP.

  • What Problem Does Draggable Solve?

    Without Draggable:

    • Complex mouse/touch calculations

    • Inconsistent mobile behavior

    • No inertia or momentum

    With Draggable:

    • Built-in mouse + touch support

    • Optional inertia (throw effect)

    • Easy constraints and snapping

    👉 Think of Draggable as “make anything draggable in one line”.

<script src="https://unpkg.com/gsap@3/dist/gsap.min.js"></script>
<script src="https://unpkg.com/gsap@3/dist/Draggable.min.js"></script>
gsap.registerPlugin(Draggable);
Draggable.create(".box");

  • Parameters / Options

    OptionMeaningExample
    typeDrag direction"x", "y", "x,y"
    boundsDrag limits".container"
    inertiaThrow effecttrue
    edgeResistanceDrag resistance0.8
    snapSnap points{ x: [0, 100] }

Horizontal Drag 

Draggable.create(".slider", {
  type: "x",
  bounds: ".wrapper"
});

Drag with Bounds 

Draggable.create(".card", {
  bounds: ".container"
});

Drag with Inertia 

Draggable.create(".ball", {
  inertia: true
});

Snap to Positions 

Draggable.create(".item", {
  type: "x",
  snap: { x: [0, 200, 400] }
});


Draggable.create(".box", {
  onDrag() {
    console.log("Dragging");
  },
  onRelease() {
    console.log("Released");
  }
});

  • Best Practices

    • Use bounds for better control

    • Enable inertia only when needed

    • Combine with FLIP for layout UI

    • Optimize for mobile touch gestures

  • Comparison

    ToolUse Case
    DraggableDrag & swipe UI
    CSS drag eventsLimited control
    HTML5 Drag APIFile-based dragging
    Custom JSComplex & error-prone

  • Quick Summary

    • Draggable enables mouse & touch drag

    • Supports swipe, snap, and inertia

    • Easy syntax and flexible options

    • Ideal for interactive UI

    • Works great with other GSAP plugins

❮ Previous Next ❯