How can I integrate GSAP Draggable into my project?

How can I integrate GSAP Draggable into my project?

To integrate GSAP Draggable, first include the GSAP library in your project. You can do this via a CDN or by installing it through npm.

What are the basic steps after including the library?

After including GSAP, you can create a draggable element by selecting it with a query selector and calling gsap.registerPlugin(Draggable). Then, use Draggable.create() to make it draggable.

Can you give me an example of the code?

Sure! Here's a simple example:

// Include GSAP and 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>

// Make an element draggable
Draggable.create('.my-element');

What if I want to restrict dragging to a specific area?

You can use the bounds property in the Draggable.create() method to restrict the dragging area. For example:

Draggable.create('.my-element', { bounds: { minX: 0, minY: 0, maxX: 500, maxY: 500 } });