Jump to content
Search Community

Best way to use GSAP with Webpack

hendrikeng 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

Hey there, thanks for the amazing plugins, awesome work.

 

I have been trying to figure out the best way to use gsap with webpack, i tried to avoid the imports-loader and started using aliases.

But since i have to include each single plugin, i was wondering if it really is the right approach.

 

i can import the plugins normaly with :

import ScrollMagic from 'scrollmagic';
import 'animation.gsap';
import 'debug.addIndicators';
import TweenLite from 'TweenLite';
import EasePack from 'EasePack';

 

but its a big mess in the webpack.config:

 

alias: {
TweenLite: path.resolve(__dirname, '../src/scripts/vendor/greensock/TweenLite.js'),
TweenMax: path.resolve(__dirname, '../src/scripts/vendor/greensock/TweenMax.js'),
TimelineLite: path.resolve(__dirname, '../src/scripts/vendor/greensock/TimelineLite.js'),
TimelineMax: path.resolve(__dirname, '../src/scripts/vendor/greensock/TimelineMax.js'),
EasePack: path.resolve(__dirname, '../src/scripts/vendor/greensock/easing/EasePack.js'),
AttrPlugin: path.resolve(__dirname, '../src/scripts/vendor/greensock/plugins/AttrPlugin.js'),
BezierPlugin: path.resolve(__dirname, '../src/scripts/vendor/greensock/plugins/BezierPlugin.js'),
ColorPropsPlugin: path.resolve(__dirname, '../src/scripts/vendor/greensock/plugins/ColorPropsPlugin.js'),
CSSPlugin: path.resolve(__dirname, '../src/scripts/vendor/greensock/plugins/CSSPlugin.js'),
CSSRulePlugin: path.resolve(__dirname, '../src/scripts/vendor/greensock/plugins/CSSRulePlugin.js'),
DirectionalRotationPlugin: path.resolve(__dirname, '../src/scripts/vendor/greensock/plugins/DirectionalRotationPlugin.js'),
DrawSVGPlugin: path.resolve(__dirname, '../src/scripts/vendor/greensock/plugins/DrawSVGPlugin.js'),
EaselPlugin: path.resolve(__dirname, '../src/scripts/vendor/greensock/plugins/EaselPlugin.js'),
EndArrayPlugin: path.resolve(__dirname, '../src/scripts/vendor/greensock/plugins/EndArrayPlugin.js'),
ModifiersPlugin: path.resolve(__dirname, '../src/scripts/vendor/greensock/plugins/ModifiersPlugin.js'),
MorphSVGPlugin: path.resolve(__dirname, '../src/scripts/vendor/greensock/plugins/MorphSVGPlugin.js'),
Physics2DPlugin: path.resolve(__dirname, '../src/scripts/vendor/greensock/plugins/Physics2DPlugin.js'),
PhysicsPropsPlugin: path.resolve(__dirname, '../src/scripts/vendor/greensock/plugins/PhysicsPropsPlugin.js'),
RaphaelPlugin: path.resolve(__dirname, '../src/scripts/vendor/greensock/plugins/RaphaelPlugin.js'),
RoundPropsPlugin: path.resolve(__dirname, '../src/scripts/vendor/greensock/plugins/RoundPropsPlugin.js'),
ScrambleTextPlugin: path.resolve(__dirname, '../src/scripts/vendor/greensock/plugins/ScrambleTextPlugin.js'),
ScrollToPlugin: path.resolve(__dirname, '../src/scripts/vendor/greensock/plugins/ScrollToPlugin.js'),
TEMPLATE_Plugin: path.resolve(__dirname, '../src/scripts/vendor/greensock/plugins/TEMPLATE_Plugin.js'),
TextPlugin: path.resolve(__dirname, '../src/scripts/vendor/greensock/plugins/TextPlugin.js'),
ThrowPropsPlugin: path.resolve(__dirname, '../src/scripts/vendor/greensock/plugins/ThrowPropsPlugin.js'),
ScrollMagic: path.resolve('node_modules', 'scrollmagic/scrollmagic/uncompressed/ScrollMagic.js'),
'animation.gsap': path.resolve('node_modules', 'scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap.js'),
'debug.addIndicators': path.resolve('node_modules', 'scrollmagic/scrollmagic/uncompressed/plugins/debug.addIndicators.js'),
},
 
is this the best approach? thanks a lot.
 
Cheers,
Hendrik
Link to comment
Share on other sites

Hi,

I am very new to webpack, so my suggestion might not be best practice.

 

I would suggest you install gsap as a npm module and add 

resolve: {
    modules: [
        'node_modules',
        path.resolve(__dirname, 'src')
    ]
}

to your webpack config. This way webpack can resolve your own stuff (located under ./src) and npm-modules.

 

This works fine for me and doesn't need anything else in webpack-config

 

Hope that helps,

-Jens

  • Like 1
Link to comment
Share on other sites

There is no need to alias stuff using the new flat commonJS directory.

 

With Babel.

import { TweenMax } from 'gsap';
import CustomEase from 'gsap/CustomEase';

 

With TypeScript.

import { TweenMax } from 'gsap';
import * as CustomEase from 'gsap/CustomEase'

// or
import CustomEase = require('gsap/CustomEase');

 

Or skip the name stuff altogether as GSAP is global.

import 'gsap';
import 'gsap/CustomEase';

 

Related post.

 

Link to comment
Share on other sites

  • 11 months later...
On 6/17/2017 at 3:48 PM, OSUblake said:

There is no need to alias stuff using the new flat commonJS directory.

 

With Babel.


import { TweenMax } from 'gsap';
import CustomEase from 'gsap/CustomEase';

 

With TypeScript.


import { TweenMax } from 'gsap';
import * as CustomEase from 'gsap/CustomEase'

// or
import CustomEase = require('gsap/CustomEase');

 

Or skip the name stuff altogether as GSAP is global.


import 'gsap';
import 'gsap/CustomEase';

 

Hello! I'm using create-react-app for my project and it started to complain about minifying GSAP modules when building production bundle. It happens because gsap modules are imported as ES6 modules, so UglifyJS fails to minify them.  ES6 code also occurs in production bundle if I import GSAP modules as described above, so it will not be compatible with older browsers.

 

There is a note about this issue in the documentation of create-react-app https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#npm-run-build-fails-to-minify

 

I ended up creating aliases as described at the beginning of this topic.

Link to comment
Share on other sites

Same thing here. 

 

It must be something specific to Create-React-App as with another boilerplate we didn't have that problem (the version is the same: 1.20.4).

 

We haven't been able to use UMD version. Honestly we just tried dropping the following line in the App.js component...

import * as TweenMax from "gsap/umd/TweenMax";

... but it throws "module not found" although it's there and it works locally using the standard ES6 import.

 

If you want to test it, just clone Create-React-App, add gsap package and import TweenMax on the App.js file.

At this point running `yarn build` should throw a error: 

yarn run v1.6.0
$ node scripts/build.js
Creating an optimized production build...
Failed to compile.

Failed to minify the code from this file:

 	./node_modules/gsap/esm/TweenLite.js:1966

Read more here: http://bit.ly/2tRViJ9

error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

 

Link to comment
Share on other sites

Yarn is down at the moment, so I can't see what's going on. Maybe another day.

 

What does it use to minify? There is no ES6 code besides the imports/exports, and some 'const' declarations used to store them. Could it be choking on that? 

Link to comment
Share on other sites

It seems like I'm having the exact same problem as @einomi has starting with version 1.20.5. Also with uglifyjs. But I'm having this problem on a project without React. Before I didn't have this problem (using 1.20.4 and earlier). There is es6 code in the last two versions of gsap (1.20.5 and 1.20.6) UglifyJs can't handle (and shouldn't handle, 'cause the output of the project should be es5).

Just started this thread:

 

Link to comment
Share on other sites

 

@La Colonia @einomi @Friebel 

 

It's not an Uglify issue. It's the create-react-app being really strict. There is a line of ES6 code in TweenLite that is causing the build to bailout, and we'll get that fixed.

 

Note that GSAP is now at version 2.0.0. There's also some new documentation about using npm.

https://greensock.com/docs/NPMUsage

 

To get the smallest build possible, I would follow this format for now. Import what you need from "gsap/all", and then put everything you import inside an array so it doesn't get dropped by tree shaking.

 

import { 
    TweenMax,
    TimelineMax,
    AttrPlugin,
    CSSPlugin,
    Bounce
} from "gsap/all";

const activated = [
    TweenMax,
    TimelineMax,
    AttrPlugin,
    CSSPlugin,
    Bounce
];

 

 

That will create a bundle that should look like this. Notice how it imports the TweenMaxBase module, which doesn't include any include plugins.

 

S5RuRum.png

 

 

 

@GreenSock this line of code needs to be changed again. And _gsScope should be defined just as window. Leaving _gsScope the way it is now will cause TweenLite to be excluded from the gsap bundle. It will still work, but it won't be optimized for production.

 

export const {Ease, Linear, Power0, Power1, Power2, Power3, Power4, TweenPlugin} = _gsScope;

 

  • Like 2
  • Thanks 1
Link to comment
Share on other sites

Definitively love this update, I'm hoping for the best in version 3.0, I've been using gsap to write transitions in vuejs using Webpack and I can say is a liberating experience from the hardships css animation, Ew!
I would love to see how you package, already love the idea of a gsap/all to go on and pick the packages you need.
I found a way to use the packages plugins and goodies in Shockingly green I copied the contents in a local copy of the npm download and overwrite with the contents on the zip file, is there any forseeable private npm server access to these files It would be ideal just to have these things updated and cached through npm.

https://docs.npmjs.com/private-modules/intro

You can also host your own NPM server and grant your shockingly green users access.
https://www.npmjs.com/package/sinopia

More private npm setup ideas.

http://thejackalofjavascript.com/maintaining-a-private-npm-registry/

 

Any hopes?

Edited by jmadriz
New npm ideas
Link to comment
Share on other sites

For some odd reason, I wasn't subscribed to this thread. So sorry about not responding earlier!

 

On 5/25/2018 at 6:47 PM, La Colonia said:

If you want to test it, just clone Create-React-App, add gsap package and import TweenMax on the App.js file.

 

I tried exactly that...

import * as TweenMax from "gsap/umd/TweenMax";

 

And it worked perfectly. [scratches head]

 

No errors. 

 

Maybe I'm doing something wrong? I was using this: https://github.com/facebook/create-react-app with GSAP 2.0.0.

 

@OSUblake, could you clarify exactly what you think needs to change in that line of code? 

Link to comment
Share on other sites

On 5/27/2018 at 1:22 PM, jmadriz said:

You can also host your own NPM server and grant your shockingly green users access.

 

I totally appreciate the idea, @jmadriz! Unfortunately, I just can't see a way to make this work with subscriptions/memberships (at least without massive headaches). How would we control access to this NPM repository? What happens when a user's membership expires? Is there some mechanism that'd authenticate each request against a live database of members? I really wish this was feasible. If you know of a good way, please do let us know. 

 

Hopefully it's pretty easy for folks to just snag the zip from our site and drop it into their project. 

 

Thanks again for the suggestion. 

Link to comment
Share on other sites

I just installed gsap 2.0.1 and transpile the gsap modules with babel via Webpack now and it works fine. For people still having this issue, maybe this helps.

 

This is what I changed in the webpack config:

Instead of excluding the node_modules folder for the babel-loader, I now replace the exclude rule by an include-rule including both my source-folder as well as the gsap folder inside node_modules, like this:

(change your sourcepath in case you're not working with src or have your webpack configfiles in a subfolder):

 

const srcPath = path.resolve(__dirname, 'src');

// ...
module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                include: [
                    srcPath,
                    path.resolve(__dirname, 'node_modules/gsap'),
                ],
                loader: 'babel-loader',
                query: { presets: ['env'] },
            },
// ...

 

Next to this I also needed to get rid of an exclude rule inside the .babelrc file that was blocking the node_modules folder from being transpiled here, so don't forget to check that file too! Otherwise above change won't work.

Hope this helps!

Link to comment
Share on other sites

I have the same situation as @Friebel. If I remove include line containing /node_modules/gsap/ from babel-loader config, then ES6 code appears in the bundle (for example, const statements).

Here is the repo with webpack configuration and TweenMax imported as import { TweenMax } from 'gsap';.  You can run build with yarn build and then inspect build/media/js/bundle.js https://github.com/sborkaproject/SP.Starter/

Link to comment
Share on other sites

On 6/3/2018 at 2:16 PM, OSUblake said:

@Friebel what problems were you having? Can you make a simple repo of what you are doing? 

 

There really should be no reason to do that. Letting Babel handle the module transformation can cause problems. I would set Babel's es2015 modules to false and let webpack handle it.

https://stackoverflow.com/a/41790154/2760155

 

 

 

@OSUblake
Just see your response is targeting me, sorry for reacting this late. And with my just renewed knowledge I now what you mean now :)  I wasn't aware that for treeshaking to work we need to set { modules: false } on the babel settings, just to only transpile all innercode to es5 and leave the module-structure/definitions the es6-way. Never knew this before.


I'm now having this for presets in .babelrc, keeping the es6 modulestructure intact, and transpiling all code inside to es5, so Webpack can still play with shaking the trees, while babel transpiled the inner goodies:
 

  "presets": [
    ["env", {
      "modules": false
    }],
  ],
  

 

@einomi If you use webpack and want to keep es5 output like me, maybe you could stick to using babel in your setup to transpile. Then those es6 const's and stuff don't matter anymore and both IE and uglifyJs are happy. Here it runs fine now, except for a strange treeshaking thing I'm facing now causing filesize to become a lot bigger using from 'gsap/all' instead of from 'gsap'. But that's something else, although as it seems very much babel-related. see other thread here:

 

  • Like 1
Link to comment
Share on other sites

22 hours ago, einomi said:

If I remove include line containing /node_modules/gsap/ from babel-loader config, then ES6 code appears in the bundle (for example, const statements).

 

const has been in browsers for years, you probably just never noticed. It was part of ES5, but was never standardized.

https://caniuse.com/#search=const

 

But it looks like Safari's original implementation is causing some problems so that should be fixed in the next version.

https://github.com/greensock/GreenSock-JS/issues/272

 

I have no idea what that embrace "let" stuff is about though. :roll:  That could allow reassignment of your exports, which is probably not a good idea.

 

Link to comment
Share on other sites

@OSUblake Wow, I didn't know const was supported by some older (ES5) browsers. Thanks for the info. Please keep in mind that IE9 and IE10 do support ES5, but don't support const. We can debate about if we still need to support those old browsers in 2018 (and I'd like to say no), but some of us still want to or need to support those for some projects if it doesn't take too much extra effort (and money). That's one of the major adventages of using greensock

Link to comment
Share on other sites

Just a note, I haven't checked all libraries, but trying to run GSDevTools doesn't seem to work. @OSUblake if you want email or get in touch with a PM I can share you the private repo from which I installed it.

 

Using GSDevTools 0.1.7

 

I've been doing this

import { TweenMax } from "gsap"; //=> works
import Draggable from "gsap/Draggable";  //=> works
import ThrowPropsPlugin from "gsap/ThrowPropsPlugin";  //=> works
import GSDevTools from "gsap/GSDevTools";  //=> GSDevTools is undefined

 

Link to comment
Share on other sites

  • 1 month later...

How to import jquery.gsap?

I'm trying 

require('gsap/src/uncompressed/jquery.gsap');

but it shows the following message:

The jquery.gsap.js plugin requires the TweenMax (or at least TweenLite and CSSPlugin) JavaScript file(s). Version 2.0.1.0.0 is too old.

 

 

Also the problem with const in production code still exists. Now we have to include node_modules/gsap folder in babel config, so it could be transpiled into ES5 code, but it's not correct. Despite const is supported by many browsers, it's not supported by IE 10 for example and is not a part of ES5 standard.

Link to comment
Share on other sites

It seems like jquery.gsap.js incorrectly determines stale param and then the message, I mentioned above, occurs.

version = (TweenLite.version + ".0.0").split("."); //in case an old version of TweenLite is used that had a numeric version like 1.68 instead of a string like "1.6.8"
stale = !(Number(version[0]) > 0 && Number(version[1]) > 7);

 

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