Jump to content
Search Community

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

jesper.landberg test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

 

  • Like 2
Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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)

 

Link to comment
Share on other sites

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')
}


 

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

  • 1 month later...
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://git@bitbucket.org/{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!

Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

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"

 

Link to comment
Share on other sites

  • 4 months later...

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
Link to comment
Share on other sites

  • 2 weeks later...

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!

Link to comment
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.
×
×
  • Create New...