Jump to content
GreenSock

chickendinosaur

How do I access Plugins/Other packages from NPM gsap package?

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

As the title states, I'm using GSAP through npm and the default pacakge is TweenMax when doing require('gsap'). Using ES6 imports with babel should convert things like import {Draggable as Draggable} from 'gsap'; to var Draggable = require('gsap').Draggable; I think. Anyway, how to I access the other pieces when requiring gsap? I did an Object.keys(TweenMax); and I didn't see and accessor methods for plugins etc.

 

Help please. Thank you!

Link to comment
Share on other sites

What are you using as a loader, Browserify, WebPack, System, Rollup?

 

GSAP is currently not setup to get modules like that, although they're working on it. Currently when you require gsap, it's only a side-effect, because everything gets added as a global. So doing this adds everything in the TweenMax file as a global.

import "gsap";

Getting Draggable to work can vary depending on what you are using for a loader. You could use the file path that points directly to Draggable in your npm modules. You could also add an alias to the browser property in your package.json so you don't have type out the full path.

"browser": {
    "Draggable": "./path-to-draggable-npm-module"
    // etc...
}

You could also create your own point of entry for gsap, where you could setup how you want to export different gsap related components.

 

  • Like 4
Link to comment
Share on other sites

I'm using browserify. I was hoping not to have to create a custom shim of course but oh well. Since Draggable seems to be a standalone package Greensock can create an npm module with their own namespace like @greensock/draggable and @greensock/gsap then npm publish --access=public which would be the best.

 

Thanks for the reply.

  • Like 3
Link to comment
Share on other sites

  • 2 weeks later...

Related to this, does anyone have any tips for using the ScrollToPlugin with Webpack?

 

I installed gsap via npm and was able to get TweenMax to import properly by using TweenMax:'gsap' in ProvidePlugin.

 

I'm confused how to import and use the ScrollToPlugin though. 

 

Any help would be greatly appreciated!

Link to comment
Share on other sites

Some progress... I was able to import ScrollToPlugin by using a direct path to it: 'gsap/src/uncompressed/plugins/ScrollToPlugin.js'

 

The problem is getting webpack to include ScrollToPlugin in its bundle since it doesn't see "scrollTo" in the TweenMax line below as being a module. It just thinks it's a random object property so it doesn't pull in the ScrollToPlugin when it bundles. 

 

TweenMax.to(window, 2, { scrollTo: {y: 200}, ease: Power2.easeInOut});

 

As a work around, I created a variable:  var test = scrollTo;

 

This forces the plugin to be bundled since it has to resolve scrollTo. Not super elegant, but works for now unless anyone else has a better approach.

Link to comment
Share on other sites

Have you tried adding the path to the browser field in your package.json like I showed above? Or in your webpack config, try adding an alias...

resolve: {
  alias: {
    'ScrollToPlugin': 'path_to_plugin'
  }
}
  • Like 1
Link to comment
Share on other sites

  • 6 months later...

Loading in greensock via bower, and using gulp (and browserifyBower) to browserify gsap.

Successfully add gsap to a library file and load gsap this way.

However, when tacking on ScrollTo plugin to the list of files to browserifyBower, it is being added to the generated library file, but it is not accessible during runtime.

Blake, I see your message and have read it now many times through, but am not sure how to act on what you are suggesting.

I also know there were some improvements in the last release related to bundling -- any pointers?  Thanks.

Link to comment
Share on other sites

Nevermind -- found this thread here:

http://greensock.com/forums/topic/10464-how-to-access-plugins-and-utils-through-npm-module/?hl=browserify#entry54847

 

By providing a somewhat lengthy path to my bower_components

import {ScrollToPlugin} from '../../../../bower_components/gsap/src/uncompressed/plugins/ScrollToPlugin';

I was able to get it to work.  Much thanks greensockians!

  • Like 1
Link to comment
Share on other sites

  • 4 weeks later...

HI guys

 

I'm having similar problems...

I'm using Webpack and if I do:

import ScrollToPlugin from 'gsap/src/uncompressed/plugins/ScrollToPlugin'

It finds the ScrollToPlugin ok but its then looking for TweenLite and is unable to find the file

Link to comment
Share on other sites

It sounds like you just need to set up an alias for TweenLite in your webpack config file, kinda like: 

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

Sorry folks. I'm pretty new to Webpack, but trying to figure this out. I haven't used 'resolve' in config until now, and it's not working for me the way I think you're explaining. I'm importing like so:

import ScrollToPlugin from 'ScrollToPlugin';
import TweenLite from 'TweenLite';

 

And in webpack.config.js I have:

 

  resolve: {
    root: path.resolve(__dirname),
    extensions: ['', '.js'],
    alias: {
      TweenLite: "gsap/src/uncompressed/TweenLite",
      ScrollToPlugin: 'gsap/src/uncompressed/plugins/ScrollToPlugin'
    }
  }
 
 

Neither import works. I get:

ERROR in ./js/components/layout/HeaderMain.js
Module not found: Error: Cannot resolve module 'ScrollToPlugin' in /Library/WebServer/Documents/bb_site_2/js/components/layout
 @ ./js/components/layout/HeaderMain.js 22:22-47

ERROR in ./js/components/layout/HeaderMain.js
Module not found: Error: Cannot resolve module 'TweenLite' in /Library/WebServer/Documents/bb_site_2/js/components/layout
 @ ./js/components/layout/HeaderMain.js 26:17-37

What's odd to me is that if I change the alias paths to something that's complete garbage, Webpack doesn't complain about it. It's like my resolve object is being ignored. Shouldn't it give me an error about that?

Link to comment
Share on other sites

I'm no expert on Webpack, but it kinda sounds like maybe your paths aren't accurate or something. Are you 100% positive that you've got TweenLite and ScrollToPlugin in the directories that you're specifying? The ones I put in my example above were just...examples. Maybe try a path that's relative to your project's root, and make sure you actually have the folders structured properly, like "/libs/gsap/src/uncompressed/TweenLite" (?)

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.
×