Create Draggable Element with Elementor Free and GSAP - Tutorial

(This page includes affiliate links. If you click and purchase, I receive a small commission at no extra cost from you and that way you can support me. I only recommend tools that I have personally used and loved.)

Get Elementor Pro Today –

1 – Elementor Pro

Create any Element Draggable with GSAP

With this GSAP code, you can simply make anything draggable and also define a bounding box so that the element cannot be dragged outside it.

In below code, we add transition:none as Elementor adds transition:all to all elements by default and that messes up with GSAP code.
In Draggable.create(‘.ADD-CLASS-NAME-HERE‘), we add the class name of the element that should be draggable.
in bounds: ‘.ADD-BOUNDING-CLASS-NAME‘, we add the class of the container that will act as a bounding box for the draggable container. This way the draggable element cannot be dragged outside the bounding container.
We also add script src to reference and run GSAP library and its draggable library to our website.
inertia:true makes it glide. If you don’t want it to glide make it false or remove that line.
Change type to your desired effect. type:rotation would make it spin. Check gsap documentation for more types.

				
					<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.13.0/gsap.min.js" integrity="sha512-NcZdtrT77bJr4STcmsGAESr06BYGE8woZdSdEgqnpyqac7sugNO+Tr4bGwGF3MsnEkGKhU2KL2xh6Ec+BqsaHA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.13.0/Draggable.min.js" integrity="sha512-dgqdovLK5r/NMiV5YfWA0xC94DKGrm+6q1OZpuWHm+uBGLTck6wu58WAX9lmy8wec6cVnsgxbPJ60DtmNFnfgg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.13.0/InertiaPlugin.min.js" integrity="sha512-PEhxb+AivyFXL3zZnE/TwS4sgWRDZRF7aTGVGkiF7ej++sMKTtN+ZfrEo8lPxrfMIOws/1RkVc1Apua29ktRwg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

				
					<style>
    
    .dm-drag-element {
        
        transition: none !important;
    }
    
</style>

<script>

Draggable.create(".dm-drag-element", {
    
    bounds: ".dm-drag-container",
    type:'x,y',
    inertia:true
    
});
    
</script>

2 – GSAP Dragging with Inertia & Snap (Smoothing and Reset)

With this GSAP code, you can simply make anything draggable and also define a bounding box so that the element cannot be dragged outside it.

dm-drag-element-2 is the CSS of the draggable element.
dm-drag-container-2 is the CSS of the bounding box container. (optional) – Remove from code too if not needed.
Snap makes it reset to original location. Remove if not needed. (line 21 – 24)
edgeResistance can add resistance when leaving bounding box. You can also add dragResistance. Check video for detail.

				
					<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.13.0/gsap.min.js" integrity="sha512-NcZdtrT77bJr4STcmsGAESr06BYGE8woZdSdEgqnpyqac7sugNO+Tr4bGwGF3MsnEkGKhU2KL2xh6Ec+BqsaHA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.13.0/Draggable.min.js" integrity="sha512-dgqdovLK5r/NMiV5YfWA0xC94DKGrm+6q1OZpuWHm+uBGLTck6wu58WAX9lmy8wec6cVnsgxbPJ60DtmNFnfgg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.13.0/InertiaPlugin.min.js" integrity="sha512-PEhxb+AivyFXL3zZnE/TwS4sgWRDZRF7aTGVGkiF7ej++sMKTtN+ZfrEo8lPxrfMIOws/1RkVc1Apua29ktRwg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<style>

    .dm-drag-element-2 {

        transition: none !important;
    }

</style>

<script>

Draggable.create(".dm-drag-element-2", {
  bounds: ".dm-drag-container-2",
  inertia: true,
  type:"x,y",
  edgeResistance:1,
  snap: {
    x: () => 0, 
    y: () => 0
  }
});

</script>

dm-drag-element-3 is the CSS of the draggable element.
Snap makes it reset rotation.

Important: Only use //1 or //2 code based on your requirements.

				
					<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.13.0/gsap.min.js" integrity="sha512-NcZdtrT77bJr4STcmsGAESr06BYGE8woZdSdEgqnpyqac7sugNO+Tr4bGwGF3MsnEkGKhU2KL2xh6Ec+BqsaHA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.13.0/Draggable.min.js" integrity="sha512-dgqdovLK5r/NMiV5YfWA0xC94DKGrm+6q1OZpuWHm+uBGLTck6wu58WAX9lmy8wec6cVnsgxbPJ60DtmNFnfgg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.13.0/InertiaPlugin.min.js" integrity="sha512-PEhxb+AivyFXL3zZnE/TwS4sgWRDZRF7aTGVGkiF7ej++sMKTtN+ZfrEo8lPxrfMIOws/1RkVc1Apua29ktRwg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<style>

    .dm-drag-element-3 {

        transition: none !important;
    }

</style>

<script>

//Use only 1 or 2 from below, not both

// 1 - Returns rotation to 0 instantly

Draggable.create(".dm-drag-element-3", {
    
  inertia: true,
  type:"rotation",
  
  snap: function (value) {
   
  return 0;
   
  }
});


// 2 - Resets Orientation after it stops spinning

Draggable.create(".dm-drag-element-3", {
  type: "rotation",
  inertia: true,
  onThrowComplete: function () {
    const current = this.rotation;
    
    // Snap to nearest multiple of 360
    const snapped = Math.round(current / 360) * 360;

    gsap.to(this.target, {
      rotation: snapped,
      duration: 1,
      ease: "power2.out"
    });
  }
});

</script>