Throwpropsplugin not working (npm/webpack issues....)

[jesper.landberg]

Hi,

 

I'm trying to use throwpropsplugin but it doesnt work or give any console errors....

import TweenMax from 'gsap'
import Draggable from 'gsap/Draggable'
import './assets/js/ThrowPropsPlugin'

 

Draggable.create(document.querySelector('.slider'), {
  type: "x",
  edgeResistance: 0.9,
  dragResistance: 0.5,
  throwResistance: 0.75,
  throwProps: true,
  bounds: {
    maxX: 0,
    minX: 5000
  }
})

I am using the "...for npm" users flat version of ThrowPropsPlugin.js.

[GreenSock]

Did you try this?:

 

import ThrowPropsPlugin from './assets/js/ThrowPropsPlugin';

 

[jesper.landberg]

9 hours ago, GreenSock said:

Did you try this?:

 

import ThrowPropsPlugin from './assets/js/ThrowPropsPlugin';

 

Nope, no differenece. No errors or anything.

[OSUblake]

I would try adding those plugins to GSAP's npm folder and importing like this.

import ThrowPropsPlugin from 'gsap/ThrowPropsPlugin';

 

[jesper.landberg]

On 2017-10-30 at 1:48 PM, OSUblake said:

I would try adding those plugins to GSAP's npm folder and importing like this.

import ThrowPropsPlugin from 'gsap/ThrowPropsPlugin';

 

It worked=) thanks so much for the tip, wouldnt have thought of it myself!

[OSUblake]

3 hours ago, jesper.landberg said:

It worked=) thanks so much for the tip, wouldnt have thought of it myself!

 

Are you using some framework or cli tool? I'm trying to figure out what the issue is when importing from a regular folder. Somebody else was having the same problem using the vue-cli.

[jesper.landberg]

2 hours ago, OSUblake said:

 

Are you using some framework or cli tool? I'm trying to figure out what the issue is when importing from a regular folder. Somebody else was having the same problem using the vue-cli.

I'm using nuxt which is a small vue framework.

While ur solution worked for me locally... I didn't work after I deployed the files, since ThrowPropsPlugin is only in my local node_modules folder. (hosted on netlify, and using a webhook to build the site on deploy). Would be insanely grateful is someone could figure out what the problem is when importing the module from a regular folder.

[jesper.landberg]

So I'm yet to solve this issue. 
This is not throwing me any errors, but it's not working:

 

import TweenMax from 'gsap'
import Draggable from 'gsap/Draggable'
import ThrowPropsPlugin from '../assets/js/ThrowPropsPlugin

 

But moving my ThrowPropsPlugin.js from my assets/js folder to the gsap npm folder and importing it like this works:

 

import TweenMax from 'gsap'
import Draggable from 'gsap/Draggable'
import ThrowPropsPlugin from 'gsap/ThrowPropsPlugin

 

However this is not a viable solution for me since it's not in the npm folder when the build is done on the server.

 

I am using Vue/Nuxt, which is using webpack.

[OSUblake]

Hi @jesper.landberg

 

I know this isn't ideal, but it should work.

 

Create a private repo. Some services like GitHub charge for that, but there are free alternatives like GitLab, BitBucket, and Visual Studio Team Services.

 

Add the JS files npm normally installs with GSAP to that repo. It's important to use those files as their require statements are setup for a flat directory structure. Now add the the Club GreenSock plugins to that repo.

 

Now create a package.json for that repo. Something as simple as this will do.

{
  "name": "gsap",
  "version": "1.20.3",
  "main": "./TweenMax.js"
}

 

You should now be able to install from that repo.

https://stackoverflow.com/questions/10386310/how-to-install-a-private-npm-module-without-my-own-registry

https://docs.npmjs.com/cli/install

 

And import like this.

import TweenMax from 'gsap'
import Draggable from 'gsap/Draggable'
import ThrowPropsPlugin from 'gsap/ThrowPropsPlugin

 

[jesper.landberg]

On 2017-11-08 at 2:06 PM, OSUblake said:

Hi @jesper.landberg

 

I know this isn't ideal, but it should work.

 

Create a private repo. Some services like GitHub charge for that, but there are free alternatives like GitLab, BitBucket, and Visual Studio Team Services.

 

Add the JS files npm normally installs with GSAP to that repo. It's important to use those files as their require statements are setup for a flat directory structure. Now add the the Club GreenSock plugins to that repo.

 

Now create a package.json for that repo. Something as simple as this will do.

{
  "name": "gsap",
  "version": "1.20.3",
  "main": "./TweenMax.js"
}

 

You should now be able to install from that repo.

https://stackoverflow.com/questions/10386310/how-to-install-a-private-npm-module-without-my-own-registry

https://docs.npmjs.com/cli/install

 

And import like this.

import TweenMax from 'gsap'
import Draggable from 'gsap/Draggable'
import ThrowPropsPlugin from 'gsap/ThrowPropsPlugin

 

 

 

Thanks. Having issues when npm installing the repo tho:S Throwing me all kinds of error, access rights and so on.. guess it's a user problem, but even if I update my ssh config I guess netlify will get the same access right errors when it is running the build script on deploys.

Any idea WHY I'm having this throwprops issue? I mean other premium plugins like SplitText is working just by importing it from my local path. The weird thing here at least from my point of view is that there is no errors thrown... it's just like throwprops isn't there.

 

It's not possible to solve this using webpack aliases or so?

[OSUblake]

15 minutes ago, jesper.landberg said:

Thanks. Having issues when npm installing the repo tho:S Throwing me all kinds of error, access rights and so on.. guess it's a user problem, but even if I update my ssh config I guess netlify will get the same access right errors when it is running the build script on deploys.

 

You can install from a local folder instead of a repo using the same approach. That might get around those access rights.

 

18 minutes ago, jesper.landberg said:

Any idea WHY I'm having this throwprops issue? I mean other premium plugins like SplitText is working just by importing it from my local path. The weird thing here at least from my point of view is that there is no errors thrown... it's just like throwprops isn't there.

 

Definitely weird. What do you see when you log this out?

console.log(ThrowPropsPlugin.version)
console.log(window.com.greensock.plugins)

 

[jesper.landberg]

6 minutes ago, OSUblake said:

 

You can install from a local folder instead of a repo using the same approach. That might get around those access rights.

 

 

Definitely weird. What do you see when you log this out?

console.log(ThrowPropsPlugin.version)
console.log(window.com.greensock.plugins)

 

 

I also tried copying the npm gsap folder to my project assets folder but that gave me errors aswell.

 

The console log outputs undefined for for ThrowPropsPlugin.version and the below for window.com.greensock.plugins

 

1. Object
   AttrPlugin:ƒ ()
   BezierPlugin:ƒ ()
   CSSPlugin:ƒ ()
   DirectionalRotationPlugin:ƒ ()
   ModifiersPlugin:ƒ ()
   RoundPropsPlugin:ƒ ()
   TweenPlugin:ƒ (props, priority)
   __proto__:Object

 

 

 

And btw this is how I import/require the modules now... but it's the same if skipping the conditional and using es6 imports.

 

import TweenMax from 'gsap'

let Draggable
let ThrowPropsPlugin
let ModifiersPlugin

if (process.browser) {
  Draggable = require('gsap/Draggable')
  ThrowPropsPlugin = require('~/assets/js/ThrowPropsPlugin')
  ModifiersPlugin = require('gsap/ModifiersPlugin')
}

 

[OSUblake]

Are you sure you're using the files from the "bonus-files-for-npm-users" folder? SplitText doesn't have any dependencies, so that might not cause any problems. However, throwProps does, so that might be the issue.

 

 

[jesper.landberg]

Just now, OSUblake said:

Are you sure you're using the files from the "bonus-files-for-npm-users" folder? SplitText doesn't have any dependencies, so that might not cause any problems. However, throwProps does, so that might be the issue.

 

 

Yup 100% sure, and to be extra sure I replaced it with the npm bonus file now=)

 

Btw I sent u a link in a PM f u want to look at it in the browser.

[Tim Rijkse]

On 08/11/2017 at 2:06 PM, OSUblake said:

Hi @jesper.landberg

 

I know this isn't ideal, but it should work.

 

Create a private repo. Some services like GitHub charge for that, but there are free alternatives like GitLab, BitBucket, and Visual Studio Team Services.

 

Add the JS files npm normally installs with GSAP to that repo. It's important to use those files as their require statements are setup for a flat directory structure. Now add the the Club GreenSock plugins to that repo.

 

Now create a package.json for that repo. Something as simple as this will do.

{
  "name": "gsap",
  "version": "1.20.3",
  "main": "./TweenMax.js"
}

 

You should now be able to install from that repo.

https://stackoverflow.com/questions/10386310/how-to-install-a-private-npm-module-without-my-own-registry

https://docs.npmjs.com/cli/install

 

And import like this.

import TweenMax from 'gsap'
import Draggable from 'gsap/Draggable'
import ThrowPropsPlugin from 'gsap/ThrowPropsPlugin

 

 

@OSUblake In my opinion this is the best solution however when I fork the GSAP repository and try to use my own private repository (Bitbucket) I get the following error:

 

"These dependencies were not found: gsap".

 

Any idea how this can happen? The 2 repositories are exactly the same :\

 

This is how I'm loading GSAP in my package.json:

 

"gsap": "git+ssh://[email protected]/{my-company}/gsap.git",

 

I can see the gsap folder is present in my node_modules folder after installing, this makes it so strange.. I have no clue

 

Any help is appreciated!

[OSUblake]

Hi @Tim Rijkse

 

Are you forking the GSAP repo from GitHub?

 

Make sure the package name is gsap, and it might be a good idea to clear your cache so it doesn't try to install the hosted version of gsap.

 

Not 100% sure, but the problem might be the paths. Does the bottom of the Draggable.js file look like?

//export to AMD/RequireJS and CommonJS/Node (precursor to full modular build system coming at a later date)
(function(name) {
	"use strict";
	var getGlobal = function() {
		return (_gsScope.GreenSockGlobals || _gsScope)[name];
	};
	if (typeof(module) !== "undefined" && module.exports) { //node
		require("../TweenLite.js");
		require("../plugins/CSSPlugin.js");
		module.exports = getGlobal();
	} else if (typeof(define) === "function" && define.amd) { //AMD
		define(["TweenLite", "CSSPlugin"], getGlobal);
	}
}("Draggable"));

 

Or more like this? 

//export to AMD/RequireJS and CommonJS/Node (precursor to full modular build system coming at a later date)
(function(name) {
	"use strict";
	var getGlobal = function() {
		return (_gsScope.GreenSockGlobals || _gsScope)[name];
	};
	if (typeof(module) !== "undefined" && module.exports) { //node
		require("gsap/TweenLite.js");
		require("gsap/CSSPlugin.js");
		module.exports = getGlobal();
	} else if (typeof(define) === "function" && define.amd) { //AMD
		define(["gsap/TweenLite", "gsap/CSSPlugin"], getGlobal);
	}
}("Draggable"));

 

Notice how the paths are different. I'm wondering if that's the issue.

[Tim Rijkse]

@OSUblake Thanks for the quick response! Yes, the package name is "gsap". The bottom of my Draggable file looks like your first snippet, so the path is set to:

 

../TweenLite.js

 

I tried to clear the cache and reinstall the package but unfortunately without any luck.

[OSUblake]

Hmmmm... I'll try and setup something later today on bitbucket and see what the problem might be.

 

As a sanity check, trying renaming the package and everything else to something other than "gsap", like "gsap-test", and then importing with that new name. I know that will fail for the member plugins, but I'm wondering if will work for a simple import like TweenLite.

import {TweenLite} from "gsap-test"

 

[Tim Rijkse]

Hmmm strange, this is giving me the same error except it's not 'gsap' not found but 'gsap-test' not found. Am I loading my package wrong maybe?

 

 

[OSUblake]

Yeah, that's strange. Sounds like it isn't being loaded correctly for some reason.

[Tim Rijkse]

Let me set up a github repository with the same settings I have now  maybe it helps...

[Tim Rijkse]

@OSUblake I finally found out what went wrong! When cloning the repository all files are located in the `src` folder. However, in the npm package all js files are stored in the root folder. Moving the files from `src` to `root` fixed the issue!

 

Thanks for helping out

[OSUblake]

Awesome! That's why I was asking about what the bottom of the draggable file looked like. The github repo is structured a little different than the package hosted on npm.

[jmadriz]

Yes, indeed there should be a GSAP webpack friendly version even for shockingly green peeps, 
My solution consisted on some fortunate configurations and needed no external git repo with my own Shockingly Green GSAP.
I copied the contents of `node_modules/gsap` from a regular `npm i gsap` installation into the root of my project.
and added the shockingly green files to this pseudo npm package.
In the root of my git repository I had a set of vueJS projects each with it's own package.json from each I ran `yarn add '../gsap'` or `npm i --save '../gsap'`
so the file structure was like this:
- vue-project-with-npm/package.json

- gsap/ (with Shockingly green files added)

after running the local install 
my package.json had something like this
 

"gsap": "../gsap",

and then from my vue files I impor like this:

import ThrowPropsPlugin from 'gsap/ThrowPropsPlugin

[GreenSock]

We just released 1.20.5, so please try updating to that and let us know if that makes things easier for you. If you get it via NPM, it's ES modules by default. And of course when you download the bonus zip, the files are structured similarly. 

 

Enjoy!