Hi guys,

I import it in NodeJS way and use webpack (instead of bower, cause webpack is more powerful) to compile. It will show error like following.

error given was: ReferenceError: document is not defined
  at Function.<anonymous> (/.../node_modules/gsap/src/minified/TweenMax.min.js:15:5081)
  at [object Object].check (/.../node_modules/gsap/src/minified/TweenLite.min.js:12:817)
  at new p (/.../node_modules/gsap/src/minified/TweenLite.min.js:12:1104)
  at t._gsDefine (/.../node_modules/gsap/src/minified/TweenLite.min.js:12:1154)

I've read the article thread talking about this.

The current workaround for me is tell webpack (by adding rules in its configuration file) where to find the TweenMax, TimelineMax, and so, instead of requiring gsap cause it doesn't work for this moment.

e.g. webpack.config.js

  resolve: {
    alias: {
      'TweenLite': path.resolve(MODULE_DIR, 'gsap/src/minified/TweenLite.min.js'),
      'TweenMax': path.resolve(MODULE_DIR, 'gsap/src/minified/TweenMax.min.js'),
      'TimelineLite': path.resolve(MODULE_DIR, 'gsap/src/minified/TimelineLite.min.js'),
      'TimelineMax': path.resolve(MODULE_DIR, 'gsap/src/minified/TimelineMax.min.js'),
      'EasePack': path.resolve(MODULE_DIR, 'gsap/src/minified/easing/EasePack.min.js')
    }
  }

Actually I think it would be nice to use gsap like this:

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

Howdy 🤠 Massive fan of GSAP and absolutely loving 3 so far.

While migrating a project from 2 to 3, I discovered a bit of unexpected behavior that I think would be considered a bug.

I've created a codepen to demonstrate the issue. As you can see, when attempting to resolve a promise using onComplete, resolve can no longer be passed first-class to onComplete as it could in gsap 2:

function test() {
  return new Promise(resolve => {
    gsap.to(square, {
      duration: 1.5,
      x: 200,
      ease: 'power3.inOut',
      onComplete: resolve
    })
      // also doesn't resolve using Tween.then
      // .then(resolve)
  })
}

test().then(() => {
  // never resolves
})

With that said, wrapping resolve in an arrow function (i.e. onComplete: () => resolve()) works. Another workaround is passing an empty object to onCompleteParams, which I believe is related to this line in core, but that still doesn't work with Tween.then.

Sure, there are workarounds, but because this behavior is different than that of v2, I figured it would be worth bringing to your attention! I like the simplicity of passing functions first-class, so it would be great to be able to continue doing so with gsap 3.

Just in case there is curiosity regarding the use-case here, I am working with a 3rd party lib (highway.js) that passes a done callback to Transition.in and Transition.out. After inspecting the source, I realized that done is actually just resolve coming from a Promise, which led me to creating these isolated tests in codepen.

Thanks for your prolific work on GSAP! Cheers 🍻

Bundling parts of GSAP (e.g. TweenLite.js) fails if done in multiple webpack entry points:

// in entry point A
import TweenLiteA from 'gsap/TweenLite'

// in entry point B
import TweenLiteB from 'gsap/TweenLite'

Now if you include both bundled entry points, A and B, in a HTML page, TweenLiteA will correctly point to the TweenLite function, however, TweenLiteB will be an empty object.

I made a minimal repro to make this issue easier to grasp, you can find it at Loilo/repro-webpack-gsap.

Note: While TweenLite is actually bundled in each a.js and b.js in the repro, the problem is the same when it's splitted out to a separate file and imported from there.

I'm not sure if this is an issue for the GreenSock or rather the webpack team — let me know if I can help with anything here. 🙂

I've made an account, downloaded CustomEase, and added CustomEase.min.js to my project.

import { TimelineLite } from 'gsap'

works fine, but when I try:

import CustomEase from '../vendor/CustomEase.min.js'

I get:

Why all the namespace code-magic? it makes it nearly impossible to port this otherwise great tool to newer systems like browserify or webpack. You should really consider dropping some of the actionscript/java legacy and move towards a CommonJS compatible script without messing around with window this and com.greensock.core that. Not only is it really difficult to follow, it also takes up a lot of valuable coding space.

I’d like to do a simple require('TweenLite') but... how? I’ve been hacking around with the source but it’s a dependency mess right now. No offense.

It shouldn’t be a great deal for you that knows the inner workings of f.ex https://github.com/greensock/GreenSock-JS/blob/master/src/uncompressed/TweenLite.js#L74-L95

Maybe just don’t do your own dependency management, instead use requireJS or something else for development and then wrap it up in nice little packages for distribution...?

Let me know if I can help.

When I load GSAP with webpack, I get the error _doc = document; document is not defined.

This page suggests several ways to "shim" modules. But none of them are working for me.

This forum thread suggests some ways to shim the module to be compatible with ES6 import statements and works if "global" is defined in the node environment.

I don't see a clear solution. Any help appreciated.

When using gsap in conjunction with webpack and es6 imports, like this, everything worked fine:

import TimelineMax from 'gsap/src/uncompressed/TimelineMax';

After the update to 1.19, imports break with a webpack message that the modules were not found. There seems to be a breaking change in the import handling.

In addition: There's no way we could get the ScrollToPlugin to work with TweenMax. The problem is always a seemingly missing dependency of TweenLite in the plugin.:

Before:

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

After (not working):

import { ScrollToPlugin, TweenLite } from 'gsap';

Hey, I'm not much of a JS guy, but I've had complaints from people on old versions of Safari.

Older versions don't like const keyword.

Using webpack and const is in my build. Let me know if I did something wrong.

*!

• VERSION: 2.0.1
• DATE: 2018-05-30
• UPDATES AND DOCS AT: http://greensock.com
• @license Copyright (c) 2008-2018, GreenSock. All rights reserved.
• This work is subject to the terms at http://greensock.com/standard-license or for
• Club GreenSock members, the software agreement that was issued with your membership.
• @author: Jack Doyle, [email protected] */ const r="undefined"!=typeof window?window:void 0!==t&&t.exports&&void 0!==i?i:{},o=function(t,e){var n={},i=t.document,r=t.GreenSockGlobals=t.GreenSockGlobals||t;if(r.TweenLite)return r.TweenLite;var o,a,s,l,c,u,p,d=function(t){var e,n=t.split("."),i=r;for(e=0;e<n.length;e++)i[n[e]]=i=i[n[e]]||{};return i},h=d("com.greensock"),f=function(t){var e,n=[],i=t.length;for(e=0;e!==i;n.push(t[e++]));return n},m=function(){},g=(u=Object.prototype.toString,p=u.call([]),function(t){return null!=t&&(t instanceof Array||"object"==typeof t&&!!t.push&&u.call(t)===p)}),b={},x=function(t,e,i,o){this.sc=b[t]?b[t].sc:[],b[t]=this,this.gsClass=null,this.func=i;var a=[];this.check=function(s){for(var l,c,u,p,h=e.length,f=h;--h>-1;)(l=b[e[h]]||new

The current setup works great in most situations but it's not entirely npm/node/modules friendly. Let me show some of the limitations of the current setup, which may not be big on their own, but they pile up.

Ease of import (✅ fixed in 1.19.1)

Importing a plugin or just a part of GSAP is cumbersome

import TweenLite from 'gsap/src/uncompressed/TweenLite';
import Draggable from 'gsap/src/uncompressed/utils/Draggable';

By just moving/copying the js files to the root of the npm package (not on GitHub) one could import them this way:

import TweenLite from 'gsap/TweenLite';
import Draggable from 'gsap/Draggable';

Chance of code duplication

I can import TweenLite and TweenMax in three ways and in larger projects this could easily happen:

// main.js
import 'part1.js';
import 'part2.js';
import 'part3.js';

// part1.js
import {TweenLite} from 'gsap';

// part2.js
import TweenLite from 'gsap/src/uncompressed/TweenLite';

// part3.js
import TimelineMax from 'gsap/src/uncompressed/TimelineMax';

The resulting main.js will have the entire TweenLite.js, TimelineMax.js, and TweenMax.js (which include both of the previous ones already).

This likely works thanks to GSAP' own plugin system, but the output will be heavier to download, parse and execute.

See #180

Automated third-party optimization

Because of its proprietary bundling/plugin system, GSAP users completely miss out on optimizations like tree-shaking, which are becoming more and more common.

A ESModules-enabled GSAP would allow the ease of this:

import {TweenLite, Draggable} from 'gsap';

While keeping the lightness of the carefully-selected:

import TweenLite from 'gsap/src/uncompressed/TweenLite';
import Draggable from 'gsap/src/uncompressed/utils/Draggable';

Without requiring tooling-specific configurations (https://github.com/greensock/GreenSock-JS/issues/165, https://github.com/greensock/GreenSock-JS/issues/157#issuecomment-229055039)

Notes

All of this would not come at the expense of everybody else since you'd still offer pre-packaged ready-to-use modules.

While backwards compatibility for npm users could be maintained, semantic versioning (i.e. publishing 2.0.0) would not break existing installations even if you remove the src folder from the published package.

Bonus points: having an npm-specific build will make the code even lighter because you don't need to include UMD.

Related: Three.js just now accepted a PR by @Rich-Harris to refactor the code into proper ES Modules.

I am making the scroll effect with GSAP and vue-scrollmagic in my Nuxt.js project. The code is the following as:

import {gsap, TweenMax} from 'gsap' import ScrollToPlugin from "gsap/ScrollToPlugin"; const plugins = [ScrollToPlugin];

export default { name: 'Test', mounted() { this.startAnimations(this.$refs) }, methods: { startAnimations: function(refs) { var tween = TweenMax.to(refs.slide1, 0.5, {scrollTo:{y: 500}}) const scene = this.$scrollmagic.scene({ triggerElement: refs.slide1, triggerHook: 0, duration: "100%" }) .setPin(refs.slide1) .setTween(tween) this.$scrollmagic.addScene(scene) } }, }

In this case, I have got the error as the following:

gsap-core.js?a5cf:3362 Uncaught TypeError: Failed to execute 'scrollTo' on 'Element': parameter 1 ('options') is not an object.

How can I solve this issue?

I'm working on a upgrade to V3 in a project and somehow I get random errors regarding the handling of promises.

I'm unable to pin why it's happening, since it's happing at multiple tween at random occurrences..

Maybe you can shed some light on it?

Thanks! ❤️

Hi GSAP Team,

It would incredibly helpful for finessing the timing of animations, and debugging timeline based animation issues if there was a method of visualising timeline labels with the 'markers' property - so that they were either automatically picked up when using them or could be passed in as an object of additional markers.

Even just being able to print static markers to the viewport would be super helpful - like in the SnorklTV ScrollTrigger course video that's referenced in the 'How does pinning work under the hood' section of the docs. Here they're using the markers to illustrate 100px increments in the dom to explain how the pin spacer works - with custom markers you could potentially pass in an object containing an array of labels and pixel values to track how animations line up to whatever you're aiming for with your sequence, without having to code up fake HTML elements whilst building out the animation.