Jump to content
Search Community

How to access plugins and utils through npm module

killroy 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 currently bundling up my client up using requires and browserify.

I installed gsap using npm install, and it seems to only expose TweenMax.

 

I managed to bundle Draggable using './node_modules/gsap/src/uncompressed/utils/Draggable.js', but hte resulting require('./node_modules/gsap/src/uncompressed/utils/Draggable.js') looks pretty ugly.

 

Furthermore it sees that TimeLineLite is not exposed either, even though it's contained.

 

How can I access the various components using the npm module?

 

Thanks,

Sven

Link to comment
Share on other sites

  • 2 months later...

I got to this post by searching about Browserify with GSAP.

 

killroy, for the long names, i believe you can solve it by using alias. if you're using grunt-browserify, here's a link https://github.com/jmreidy/grunt-browserify#alias 

 

But as for exposing other modules other than TweenMax, I am having the same problem. Currently, doing 

var TweenMax = require('./libs/gsap/minified/TweenMax.min');

works and I am able to use TweenMax. However, what if I want to use TimelineLite or TweenLite that's also included in the TweenMax file?

 

Thanks for your help!

Link to comment
Share on other sites

In the meantime I kept coming up against this problem. I set up browserify aliases, which then clashed with the different internal references in GSAP.

 

Finally after searching the source code I found that this worked:

 

var TweenLite = window.GreenSockGlobals.TweenLite;

 

Not a great solution. I still hope they will clean things up a bit and make them more reliable and less namespace polluting.

Link to comment
Share on other sites

  • 11 months later...

I'm so sorry to hear about your disappointment, bigo104. You absolutely can get a refund - in fact, I just issued a full refund on your account.

 

It looks like you joined yesterday and within 12 hours, you complained about us providing no support and called us liars but I didn't see any questions that you posted anywhere. Did we miss something? We're happy to answer any questions you have. And the membership isn't purchased for support - you may have noticed that we do our best to provide support to EVERYONE in the forums, not just people who signed up for Club GreenSock. Most people use our tools and get their questions answered here and never pay us a penny. The club membership is for those who want the bonus plugins, and/or the commercial license, or for those who just want to support our ongoing efforts to innovate and maintain the tools. 

 

We do want to explore what it would take to provide even better integration hooks for tools like Browserify/Node/NPM but I hope we didn't give the impression that if someone joins Club GreenSock, we're guaranteed to implement whatever they ask for into the toolset. We have to really think things through in such a robust system because there are so many moving parts and sometimes implementing a feature may have unwanted consequences elsewhere, so it's not always a super simple thing to "just add package installs support". If you have a specific solution to offer, we're totally willing to look at it. We've also been working on quite a few other enhancements to GSAP since killroy originally posted here - feel free to check out the github repo release notes to see all the happenings. It's always a tough balancing act we have to do with listening to requests, figuring out which features are top priority to implement, keeping file size down and performance top-notch, providing learning resources, etc., etc. We're certainly not perfect, but we're trying hard. 

 

Again, I'm so sorry to hear that we disappointed you. We're passionate about having customers who are thrilled with the value they receive from GreenSock. If you're not in that camp, we gladly issue a refund and wish you luck elsewhere. Like I said, I already issued a refund back to your account. Let us know if there's anything else we can do to earn your trust back. 

 

Happy tweening!

  • Like 11
  • Haha 1
Link to comment
Share on other sites

I know nothing about the original topic in this thread, but I just wanted to say @Jack - I really admire and respect the way you run things here.

 

Many forums would have deleted that 4th post and/or gotten defensive. Your response is so thoughtful and professional and that is rare these days in any industry. Between you and Carl and the mods, the discussions and answers are always great for Club members and non-members as well.

 

Hats off to you sir. :)

  • Like 8
Link to comment
Share on other sites

Complaints aside, what was the original problem?

 

Most CommonJS loading problems are really easy to fix. We were even able to help somebody load GSAP on an Espruino microcontroller. If you were having trouble getting the member-only plugins through NPM, that's because they are aren't included in the package. You would need to download those separately.

  • Like 3
Link to comment
Share on other sites

  • 6 months later...

I'm using Webpack with Babel and ES6.

So how would I just import TweenLite and just CSS plugin?

In the NPM description it says that everything is included in the package, but I don't want to bloat my project since I don't need 90% of what's included in the package.

Edit:

I've tried the usual syntax and it doesn't work.

import { TweenLite, CSSPlugin } from 'gsap';

console.log(TweenLite) // undefined
Link to comment
Share on other sites

  • 1 month later...

For the record, this should work in 1.19.0. And if you just want to isolate individual parts (like TweenLite and CSSPlugin) without loading anything else, you should be able to use the direct path syntax, like:

import TweenLite from "/your/path/TweenLite";

You *may* need to add some aliases to your webpack config like: 

resolve: {
  root: path.resolve(__dirname),
  extensions: ['', '.js'],
  alias: {
    "TweenLite": "src/libs/gsap/TweenLite",
    "CSSPlugin": "src/libs/gsap/plugins/CSSPlugin"
  }
}
  • Like 3
Link to comment
Share on other sites

That fashion does work with 1.19.0, that said it does work because CSSPlugin and TweenLite are included by default ; try to use other plugins and you're done.

 

On a wider picture, I think you should consider moving the entrypoint away from src/uncompressed/TweenMax to something different, like src/uncompressed/index.js (?) so you can deal with the imports properly. It's actually *not possible at all* to include an optional plugin without having to tweak the build configuration or messing with the paths, which seems not that good.

 

I honestly forked the repo on github, and started to try to mess around by myself, thinking i would submit a PR or something. Truth is the code is a spaghetti mess because of legacy i guess (no offense, we're all the same here). There was a time that your "_class" helper would have been properly coded into src/uncompressed/TweenMax.js and added to a global scope (and i know about window.GreenSockGlobals = {}, i just feel it's a tweak rather than a proper architecture design choice). Now i guess it's not that much of handy and rather intrusive. I would personally love have time to fix GS as in each object has a closed scope and a main gsap one but it looks weeks to go there and i just need to import ScrollToPlugin.

 

Don't mistake me, product is awesome and no doubt the best in its kind, and i'm an early adopter since the first ages of the flash version (rip).

Just wanted to add my 2c to make it even better.

Link to comment
Share on other sites

Yes, for sure. Our plan is to do a rewrite in ES6 but as you guessed, that's no small task. For now, the tweaks to 1.19.0 offer a lot of compatibility with ES6 build systems. Thanks for the suggestions, and thanks for being a long-time user. Be patient with us and we'll get to more of the ES6 conveniences. :)

  • Like 1
Link to comment
Share on other sites

  • 6 months later...

Hey everyone,

 

I'm struggling to run my animations.  I cant get splittext to work or anything else for that matter.  I became a shockingly green member, downloaded all the plugins and I cant get them to work.  Is there anyone that can help me to link the CDN or the actual plugins correctly?  Maybe a youtube link on how to link everything together.  I've watched video after video and there isnt a single video that I've been able to find that walks you through the steps of connecting these plugins properly.  I'm so lost, someone please for the love of god help me.

Link to comment
Share on other sites

Hi Chargar,

 

Welcome to the GreenSock forums,

 

Sorry to hear you are having troubles. I am going to assume you are not using a build system as is discussed throughout this thread and that you are just working out of a local folder. 

 

To get SplitText and TweenMax to work you will need to load them using a <script> tag. The download zip you have has a src folder with uncompressed and minified folders.

 

To keep things fairly easy place the "src" folder in the same directory as the html file you are working on.

 

Second,  add these script tags to your html page

 

<script src="src/uncompressed/TweenMax.js"></script>

<script src="src/uncompressed/plugins/SplitText.js"></script>

 

The members-only tools like SplitText are not on a CDN.

 

Somewhere below those script tags you can write your own scripts using GSAP.

 

Another option: 

Visit any demo we have on CodePen that uses SplitText like this one: http://codepen.io/GreenSock/pen/EDsBI?editors=0010

 

Click the "export" button in the lower left

Choose "export zip"

 

Open up the files and edit the html to load TweenMax and SplitText from your local file system

 

From CodePen Source

 

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>SplitText: Random Character Animation</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">


  
</head>


<body>
  <link href='http://fonts.googleapis.com/css?family=Asap:400,700' rel='stylesheet' type='text/css'>


<h1 id="quote">What does the fox say?</h1>
<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/SplitText.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js'></script>
<script src="js/index.js"></script>


</body>
</html>

Hopefully that gets you on the right track. If you still need help please let us know.

  • Like 3
Link to comment
Share on other sites

Carl,

 

Thank you so much for your help. My apologies if I came off angry, I wasn't. Seeing what you guys can do with your product I've become instantly addicted and desperately want to use it. This stuff is amazing - makes a newb like me wanna be pro. I haven't been able to follow your steps but when I do I'll let you know how it goes.

 

Thanks again,

 

Char

Link to comment
Share on other sites

Hmm, it looks like you are still trying to load the version of SplitText hosted on CodePen that is only for use on CodePen.

 

I noticed above I did give the wrong location of SplitText. It is in the utils folder, not plugins so your script could look like:

<script src="src/uncompressed/utils/SplitText.js"></script>
<script src="src/uncompressed/TweenMax.js"></script>

I sent you a message with a zip of everything wired up properly.

 

C

  • Like 1
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...