Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
shshaw

GSAP & NPM/Webpack `import` for ScrollToPlugin

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?

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
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

Share this post


Link to post
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?

Share this post


Link to post
Share on other sites

@wintercounter that sounds like a question for the webpack folks. 

 

How exactly are you importing things? Perhaps the problem is related to the line where you're doing the import. (just grasping at straws here)

  • Like 1

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

×