npm importing problem with plugins

[mikkmartin]

import 'gsap'; successfully imports TweenMax, but when i want any of the plugins or utilities, I'm lost..

import Draggable from '../node_modules/gsap/src/minified/utils/Draggable.min.js';

throws an error: Error: Cannot find module '../TweenLite.js'

[apertureless]

Hey @batm4n . Yeah sadly GreenSock is not really es6 import compatible.

It actually would be great if you could do something like

import { TweenLite, Draggable } from 'gsap' 

However this is not really possible. Don't know about your setup but if you're using browserify, you should try browserify shim.

There you can add the individual paths of the plugins and register them.

After installing browserify-shim just add

"browserify": {
    "transform": [
      "browserify-shim"
    ]
  },
  "browser": {
    "TweenLite": "./node_modules/gsap/src//uncompressed/TweenLite.js",
    "Draggable": "./node_modules/gsap/src//uncompressed/utils/Draggable.js",
  },
  "browserify-shim": {
    "TweenLite": "TweenLite",
    "Draggable": "Draggable"
  }

[jackdoyle]

The AMD require statements just look for "TweenLite" now, not "../TweenLite" so that should help. And you should be able to do a regular ES6-style import for any of the classes that are in TweenMax (like all the eases, TweenLite, TimelineLite, TimelineMax, CSSPlugin, etc.). Please make sure you're using 1.19.0 or later.

[jackdoyle]

Oh, and by the way, you may need to add some aliases to your config file. In webpack, it'd look kinda like:

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

[fregante]

As an update to this:

GSAP 1.19.1 and up works without aliases

... and without any custom webpack config. This the correct code:

import TweenMax from 'gsap';

// or separately:
import TweenLite from 'gsap/TweenLite';
import CSSPlugin from 'gsap/CSSPlugin';
import TimelineLite from 'gsap/TimelineLite';

Or this:

import {TweenMax, TimelineMax, Back, Quad} from 'gsap';

But not every module can be imported in a single import; for example you have to use this for Draggable:

import Draggable from 'gsap/Draggable';