Inertia effect is not working within a draggable UI on Webflow site

[jakelaz]

Hi, we're having issues getting the inertia effect to work within a draggable component on my Webflow site (https://mor-life.webflow.io/). The #canvas element contains a bunch of .box elements (see the screenshot below). Despite the fact that dragging works, the really delightful inertia/throw animation does not. We more or less copy/pasted the draggable JS snippet from the Draggable Toss demo on Codepen, where inertia works beautifully. The only change we made was the removal of the snap-to-grid elements. We purchased the bonus plugins yesterday and would really like to get this working. Code can be inspected quite easily on Webflow, but copied below as well.

 

  var $container = $("#canvas");

  Draggable.create(".box", {
    bounds: $container,
    edgeResistance: 0.65,
    type: "x,y",
    inertia: true,
    autoScroll: true
  });

 

Thanks in advance for the support!

 

 

See the Pen zDwEk by GreenSock (@GreenSock) on CodePen

[OSUblake]

Hi Jakelaz,

 

It looks like you're also animating those boxes. The inertia is also an animation so you can't have 2 things running at the same time.

 

 

[jakelaz]

@OSUblake, thanks for the response. If you are saying I can't have multiple animations on the same element, I commented out the block you shared above and the issue with inertia persists. Any other ideas?

[OSUblake]

It was the only thing that stood out to me, but I could be wrong. If you can make a minimal demo on CodePen so we can interact and experiment with  the code, I'm sure we can figure out what the issue is. You don't need to include everything in your project. Just the bare minimum that shows the issue. 

[jakelaz]

Hey! Made a minimal demo on CodePen to illustrate the problem @OSUblake: 

See the Pen QWqQRqB by jakelaz (@jakelaz) on CodePen

. Thanks for the help here.

[OSUblake]

Thanks for the demo! It was very helpful

 

The InertiaPlugin file you are using is for modules, but you should be using the file that is located in the minified folder, InertiaPlugin.min.js.

 

Here's it working with the correct file. Also, it's a good idea to register your plugins.

 

See the Pen gOGvJEv by GreenSock (@GreenSock) on CodePen

 

[jakelaz]

Hey @OSUblake! That fixed it. Thank you so much. 

 

Do I simple register the file with the below?

 

gsap.registerPlugin(InertiaPlugin);
 

[OSUblake]

1 hour ago, jakelaz said:

Do I simple register the file with the below?

 

gsap.registerPlugin(InertiaPlugin);

 

Yep, but I actually forgot to do Draggable, so I've updated that pen.

 

gsap.registerPlugin(InertiaPlugin, Draggable);