How to require GSAP in Node.js

Question

I try to include GSAP animation library in Node.js. For example I try to run GSAP with full features and to do that I need to include first 'TweenMax.js' and then next 'TimelineMax.js'. In last version on GSAP I see that 'TweenMax.js' and 'TimelineMax.js' haves module.exports for Node.js in code implementation, but when I try to require them with Node.js - require('./lib/gsap/TweenMax.js'), Node.js returns me

'reference error: document is not defined'

in TweenMax.js and break all script.

If any have idea how to fix that problem please help. Thanks.

score 3 · Answer 1 · answered Oct 22 '14 at 08:17

Taken from the forums:

// shim for all the methods gsap is testing for css prefixes, etc 
var window = {}
  , navigator = { userAgent: "" }
  , dummyElement = { style: {}, getElementsByTagName: function() { return [] } }
  , document = { createElement: function() { return dummyElement } };

/* insert tweenmax here */

// export timeline max
module.exports = TimelineMax;

Dayne Mentier · Answer 2 · 2015-06-19T19:06:12.590

I attempted to use the shim provided by Христо Панайотов, but I couldn't get it to work. The detailed steps for getting this to work are below; note, all these modifications are done on the same file, /node_modules/gsap/src/uncompressed/TweenMax.js

1 - first install gsap

npm install gsap

2 - add the following to the beginning of your file (* shimmed to work in browser as well):

var window = window || this
   , navigator = window.navigator || { userAgent: "" }
   , dummyElement = { style: {}, getElementsByTagName: function() { return [] } }
   , document = document || { createElement: function() { return dummyElement } };

3 - Add the following "if" statement to the following loop, found on / near 6526.

for (p in _tweenLookup) {

    a = _tweenLookup[p].tweens;

    if(a && a.length) { // *** this is what I added (ends up undefined somehow).

        i = a.length;

        while (--i > -1) {
            if (a[i]._gc) {
                a.splice(i, 1);
            }
        }

        if (a.length === 0) {

            delete _tweenLookup[p]; // possible culprit: if this is an array, you should splice it!
        }
    }
}

4 - At the end of the file, before the main closure, add the following:

module.exports = _gsScope;

5 - How to use:

var gsap = require('gsap');

var Timelinelite = gsap.TimelineLite;

var TweenMax = gsap.TweenMax;

var Easing = gsap.Easing;

/// ect...

Here is a link to my github repo where I put my working TweenMax.js script: HERE

I wasn't able to solve the following "missing dependencies missing"; this doesn't seem to effect anything so far (tested TweenlineMax,TweenMax,Easing,etc.). The errors are:

GSAP encountered missing dependency: com.greensock.size
GSAP encountered missing dependency: com.greensock.clean
GSAP encountered missing dependency: com.greensock.byIndex

... Anyone know where these reside || how to fix it?

How to require GSAP in Node.js

2 Answers2