Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
gaggo

Draggable with inertia?

Recommended Posts

Hi there, 

 

Since this is a question about a premium plugin, I don't know how to create a test case on codepen. But maybe this is an easy fix anyway?

 

I am trying to make use of Draggable like this:

Draggable.create($element, {
  bounds: $wrap,
  edgeResistance: 0.5,
  type: "y,x",
  inertia: true,
});

Here is my gsap import:

import { gsap, CustomEase, ScrollToPlugin, Power4, Linear, Draggable } from 'gsap/all';
gsap.registerPlugin(CustomEase, ScrollToPlugin, Draggable);
gsap.registerEase(Linear, Power4);

...it works, but is not "throwable", meaning, it stops being dragged immediately when I release my mouse. Also snaps back into the bounds instantly on release. I thought I could control this behavior with inertia being set to true?

 

I don't get any warning in my browser console.

Link to post
Share on other sites

Hi there! 🙂

Thanks for joining the club GSAP family!

 

All the bonus plugins are free to use on codepen, so don't worry about giving away any secrets 

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



If you put together a codepen demo I'd be happy to help out. In the interim though - here's a codepen example that might do the job 

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

  • Like 2
Link to post
Share on other sites

I bet you just forgot to register InertiaPlugin. Also, you don't need to import the eases anymore - just use the string syntax. I personally prefer to define each import instead of using "gsap/all", but that's totally personal preference. 

 

// OLD
import { gsap, CustomEase, ScrollToPlugin, Power4, Linear, Draggable } from 'gsap/all';
gsap.registerPlugin(CustomEase, ScrollToPlugin, Draggable);
gsap.registerEase(Linear, Power4);

// NEW
import gsap from "gsap";
import ScrollToPlugin from "gsap/ScrollToPlugin";
import CustomEase from "gsap/CustomEase";
import InertiaPlugin from "gsap/InertiaPlugin";
import Draggable from "gsap/Draggable";
gsap.registerPlugin(CustomEase, ScrollToPlugin, InertiaPlugin, Draggable);

If you're still having trouble, we'd be happy to look at a minimal demo on CodePen. 

  • Like 2
Link to post
Share on other sites

Hi there! I managed to get it working on codepen:

 

See the Pen QWdaNrw by hirasso (@hirasso) on CodePen

 

...but I keep having trouble with the bonus plugin in my project. I downloaded the gsap-shockingly-green.zip from my profile and installed the file "gsap-bonus.tgz" with npm install gsap-bonus.tgz --save – but it doesn't install the bonus files in my node-modules folder. Screenshot #1: the contents of the .tgz file. Screenshot #2: the files in my node_modules "gsap" folder after running the above command. Weird...

Screen Shot 2021-04-09 at 20.05.32.jpg

Screen Shot 2021-04-09 at 20.06.12.jpg

Link to post
Share on other sites

I just tried copying the contents of the unpacked "package" folder manually to my node_modules/gsap folder, and voila, now it works. But this is certainly not the intended behavior, right? Maybe some issue with NPM? My npm --version7.5.3

Link to post
Share on other sites

No it's not. Maybe it's a caching issue with your setup.

 

  • Like 2
Link to post
Share on other sites

@OSUblake you are right. I had to npm uninstall gsap --save before running npm install gsap-bonus.tgz --save  again. Now I have all the files available, and it works, yayyy! :) 

  • Like 1
Link to post
Share on other sites

...just one more question: What exactly is the difference between importing from gsap/all with destructuring vs. importing every single package from gsap, gsap/Plugin1, gsap/Plugin2 , as shown by Jack above? I am using the /all approach in many of my projects, it works fine and is less verbose, e.g.:

 

import { gsap, CustomEase, ScrollToPlugin, Power4, Linear } from 'gsap/all';
gsap.registerPlugin(CustomEase, ScrollToPlugin);
gsap.registerEase(Linear, Power4);

 

Link to post
Share on other sites

There's no difference, except using gsap/all imports everything during dev, so your compile times might be a little slower as it's more code to process.

 

FYI, you don't don't need to register any gsap eases.gsap.registerEase() is used to register a custom easing function.

  • Like 3
Link to post
Share on other sites

Thank you @OSUblake! Also thanks for the hint about gsap.registerEase() !

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    No registered users viewing this page.

×