Jump to content
Search Community

GSAP & NPM/Webpack `import` for ScrollToPlugin

shshaw test
Moderator Tag

Go to solution Solved by GreenSock,

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

I've been using Vue.js a lot lately, and working with the webpack template. Importing GSAP after `npm install -s gsap` works correctly, but the ScrollToPlugin has some oddities.

 

In one of my Vue components, I have this:

import "gsap";
import ModifiersPlugin from "../../../node_modules/gsap/src/uncompressed/plugins/ModifiersPlugin.js";

And ModifiersPlugin works great.

 

But when I try to do the same for ScrollToPlugin...

import ScrollToPlugin from '../../../node_modules/gsap/src/uncompressed/plugins/ScrollToPlugin.js';

I get this error in Vue/Webpack

./~/gsap/src/uncompressed/plugins/ScrollToPlugin.js
Module not found: Error: Cannot resolve module 'TweenLite' in /Users/shaw/Sites/green-mountain/node_modules/gsap/src/uncompressed/plugins
resolve module TweenLite in /Users/shaw/Sites/green-mountain/node_modules/gsap/src/uncompressed/plugins
  looking for modules in /Users/shaw/Sites/green-mountain/node_modules
    /Users/shaw/Sites/green-mountain/node_modules/TweenLite doesn't exist (module as directory)
    resolve 'file' TweenLite in /Users/shaw/Sites/green-mountain/node_modules
      resolve file
        /Users/shaw/Sites/green-mountain/node_modules/TweenLite doesn't exist
        /Users/shaw/Sites/green-mountain/node_modules/TweenLite.js doesn't exist
        /Users/shaw/Sites/green-mountain/node_modules/TweenLite.vue doesn't exist
  looking for modules in /Users/shaw/Sites/green-mountain/node_modules
    /Users/shaw/Sites/green-mountain/node_modules/TweenLite doesn't exist (module as directory)
    resolve 'file' TweenLite in /Users/shaw/Sites/green-mountain/node_modules
      resolve file
        /Users/shaw/Sites/green-mountain/node_modules/TweenLite doesn't exist
        /Users/shaw/Sites/green-mountain/node_modules/TweenLite.js doesn't exist
        /Users/shaw/Sites/green-mountain/node_modules/TweenLite.vue doesn't exist
[/Users/shaw/Sites/green-mountain/node_modules/TweenLite]
[/Users/shaw/Sites/green-mountain/node_modules/TweenLite]
[/Users/shaw/Sites/green-mountain/node_modules/TweenLite]
[/Users/shaw/Sites/green-mountain/node_modules/TweenLite]
[/Users/shaw/Sites/green-mountain/node_modules/TweenLite.js]
[/Users/shaw/Sites/green-mountain/node_modules/TweenLite.js]
[/Users/shaw/Sites/green-mountain/node_modules/TweenLite.vue]
[/Users/shaw/Sites/green-mountain/node_modules/TweenLite.vue]
 @ ./~/gsap/src/uncompressed/plugins/ScrollToPlugin.js 181:2-34

Looking at ScrollToPlugin.js, it seems to be triggered by this section of code at the very end, starting at line 174, which ModifiersPlugin does not have.

//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(define) === "function" && define.amd) { //AMD
		define(["TweenLite"], getGlobal);
	} else if (typeof(module) !== "undefined" && module.exports) { //node
		require("../TweenLite.js");
		module.exports = getGlobal();
	}
}("ScrollToPlugin"));

Looks like the `require` on line 183 is triggering the error.

 

If I remove that block of code, the ScrollToPlugin works as expected.

 

I haven't tested all the other plugins, but I would assume if they have that block, they will produce a similar error.

 

Any idea what's going on?

Link to comment
Share on other sites

  • Solution

It should work fine if you keep the normal directory structure, where the plugin is inside a "plugins" directory. But if you're running into trouble, perhaps it'd help to just define the paths in your config file, kinda like: 

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

This might be helpful: https://github.com/greensock/GreenSock-JS/issues/165

Link to comment
Share on other sites

My directory structure isn't anything unusual. The GSAP files are all under node_modules/gsap .

 

Since the ModifiersPlugin has no problems and issue seems to be with the seemingly extraneous code at the bottom of the ScrollToPlugin I thought it was pertinent for y'all to know.

 

For future reference, adding that alias to /build/webpack.base.conf.js under resolve solved the problem.

    "TweenLite": "gsap/src/uncompressed/TweenLite"

Thanks

Link to comment
Share on other sites

I'm having the same issue. The alias fix is working fine, but only for TweenLite. I have the following config.

alias: {
       TweenLite: 'gsap/src/uncompressed/TweenLite',
       TweenMax: 'gsap/src/uncompressed/TweenMax',
       Easing: 'gsap/src/uncompressed/easing/EasePack',
       ScrollToPlugin: 'gsap/src/uncompressed/plugins/ScrollToPlugin'
}

Everything works, except TweenMax.

Uncaught TypeError: _TweenMax2.default.to is not a function

_TweenMax2.default is simply an empty object.

 

Any clues?

Link to comment
Share on other sites

  • 2 months later...

Just for those who may find it helpful, I managed to get the DrawSVGPlugin working with the following setup and webpack.

 

I created a `vendor` folder beside my standard `modules` folder, copied the minified js from the GSAP downloads and required the DrawSVGPlugin.min.js using the `script-loader` from webpack (https://github.com/webpack/script-loader) after importing 'gsap'.

 

The webpack configuration I use references a few configuration files, but I will copy that below as well for anyone that finds it useful.

import 'gsap';
require('script-loader!../vendor/DrawSVGPlugin.min.js');

import $ from 'jquery';

const STRENGTH = 15;

export default class ZigZag {
    constructor(el) {
        this.el = el;

        TweenMax.from("#zigzag", 3, {
            drawSVG: 0
        }, 0.1);

    }

//     animate(event) {
//
//         let x = 50 + ( (event.offsetX / this.el.width() ) * STRENGTH);
//         let y = 50 + ( (event.offsetY / this.el.height()) * STRENGTH);
//
//         this.image.css('background-position', x + '% ' + y +'%' );
//
//     }
//
// // .-zigzag

}

var webpackConfig = {
        context: "javascripts",
        plugins: [],
        resolve: {
            root: javascripts,
            extensions: ["js", "json"]
        },
        module: {
            loaders: [
                {
                    test: /\.js$/,
                    loader: 'babel-loader',
                    exclude: /node_modules/,
                    query: "presets": ["es2015", "stage-1"],
        "plugins": []
                }
            ]
        },
        externals: {
        }
    }
  • Like 2
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...