gaggo Posted April 9, 2021 Share Posted April 9, 2021 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 comment Share on other sites More sharing options...
Cassie Posted April 9, 2021 Share Posted April 9, 2021 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 2 Link to comment Share on other sites More sharing options...
GreenSock Posted April 9, 2021 Share Posted April 9, 2021 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. 2 Link to comment Share on other sites More sharing options...
gaggo Posted April 9, 2021 Author Share Posted April 9, 2021 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... Link to comment Share on other sites More sharing options...
gaggo Posted April 9, 2021 Author Share Posted April 9, 2021 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 --version: 7.5.3 Link to comment Share on other sites More sharing options...
OSUblake Posted April 9, 2021 Share Posted April 9, 2021 No it's not. Maybe it's a caching issue with your setup. 2 Link to comment Share on other sites More sharing options...
gaggo Posted April 10, 2021 Author Share Posted April 10, 2021 @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! 1 Link to comment Share on other sites More sharing options...
gaggo Posted April 10, 2021 Author Share Posted April 10, 2021 ...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 comment Share on other sites More sharing options...
OSUblake Posted April 10, 2021 Share Posted April 10, 2021 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. 3 Link to comment Share on other sites More sharing options...
gaggo Posted April 13, 2021 Author Share Posted April 13, 2021 Thank you @OSUblake! Also thanks for the hint about gsap.registerEase() ! Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now