skills.rest
Microck
MicrockCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

gsap-draggable

Enable drag, throw, and rotation for DOM elements with GSAP Draggable and InertiaPlugin.

Updated Feb 17, 2026
Search Tags:#ui#interaction#animation#drag and drop#gsap#draggable
One-click install
npx skills add https://github.com/Microck/gsap-skills --skill gsap-draggable
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: gsap-draggable
Source: https://github.com/Microck/gsap-skills/tree/main/skills/gsap-draggable
Command: npx skills add https://github.com/Microck/gsap-skills --skill gsap-draggable

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill enables interactive drag-and-drop functionality, inertia-based throwing, and precise control over element positioning and rotation, enhancing user engagement with web interfaces.

Core Features & Use Cases

  • Drag & Drop: Implement intuitive drag-and-drop for UI elements.
  • Inertia & Throwing: Add realistic physics for smooth, momentum-based movement.
  • Bounds & Constraints: Restrict movement within defined areas or to specific values.
  • Rotation & Snapping: Control rotational elements with precise snapping.
  • Use Case: Create a custom image slider, a draggable game piece, or a rotatable knob interface.

Quick Start

Use the gsap-draggable skill to make elements with the class 'draggable-item' draggable within their container.

Frequently Asked Questions about gsap-draggable

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I add drag and drop functionality to UI elements with GSAP?▼

Drag and drop functionality is enabled by targeting DOM elements and applying interactive movement capabilities. This allows users to intuitively drag UI components within defined containers using GSAP's Draggable utility.

Can I restrict drag movement to specific bounds or grids?▼

Yes, movement can be restricted to specific bounds or snapped to defined values and grids. This constraint capability ensures elements stay within designated areas or align perfectly to a grid during interaction.

How does inertia-based throwing work for dragged elements?▼

Inertia and throwing add realistic physics for smooth, momentum-based movement to dragged elements. This creates a natural gliding effect after the user releases the drag gesture using InertiaPlugin.

Can I use GSAP Draggable to build a rotatable knob interface?▼

Yes, the Skill supports precise rotation capabilities for DOM elements. You can build rotatable knob interfaces and control rotational elements with custom snapping to specific values.

Do I need InertiaPlugin to create momentum-based dragging?▼

Yes, InertiaPlugin is utilized alongside Draggable to enable momentum-based throwing. This combination facilitates realistic physics and smooth gliding when elements are released during interaction.

What are the limitations when creating drag and drop interactions with GSAP?▼

Limitations include dependency on the GSAP framework for execution. Complex gesture-based controls require careful configuration of bounds, snapping, and custom callback functions to ensure proper event handling.

Related Skills

Explore More Design & Creative Skills→
kartojalkartojal
11

gsap-plugins

Register and apply GSAP plugins for scroll, flip, draggable, text, and SVG animations.

Community
Intermediate
yukieijiyukieiji

vercel-react-view-transitions

Animate React UI navigation with view transitions and shared elements.

Community
Advanced
DITEKmaxDITEKmax

motion

Provides declarative React animations including gestures, scroll effects, and layout transitions.

Community
Advanced
wodsmithwodsmith
2

drag-and-drop

Implement drag-and-drop interactions for sortable lists and kanban boards.

Official
Advanced