Jump to content
GreenSock

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

Using GSAP with Node.js

Recommended Posts

I was attempting to use GSAP with Node.js, but I encountered some difficulties i could not manage to solve on my own. I am using the GSAP supplied by NPM (https://www.npmjs.com/package/gsap). I have read the other questions asked on this forum and tried their suggestions (http://greensock.com/forums/topic/7422-using-tweenlite-timelinelite-server-side-with-nodejs/), however, GSAP still throws an error saying that "document" is not defined.
 
Help would be much appreciated

Link to comment
Share on other sites

Disclaimer: I'm not much of a node guy. Perhaps someone else here who knows it well could chime in.

 

Have you tried just declaring a blank document object before accessing/loading/referencing GSAP, like:

var document = null;

OR

var document = {};

?

Link to comment
Share on other sites

NodeJS is built using the V8 Engine by Google. DOM and Window are browser items, things like the DOM and window don't exist in NodeJS. 

Disclaimer : I've used node, but not an expert by any means.

Link to comment
Share on other sites

I was able to get it working using what Sebastian wrote in this thread.

// Using the uncompressed file in node_modules/gsap/src/uncompressed/TweenMax.js
var window = {}
  , navigator = { userAgent: "" }
  , dummyElement = { style: {}, getElementsByTagName: function() { return [] } }
  , document = { createElement: function() { return dummyElement } };

// START OF FILE
var _gsScope = (typeof(module)...


... this || window, "TweenMax");
// END OF FILE

module.exports = TweenMax;

Inside your module you should be able to do this...

var TweenMax = require("gsap");

var foo = { x: 0 };
TweenMax.to(foo, 1, { x: 100, onComplete: onComplete });

function onComplete() { 
  console.log("foo.x == ", foo.x); // 100
}
  • Like 1
Link to comment
Share on other sites

After looking at the TweenMax file, it might be easier to just add this to the end of the file.

module.exports = _gsScope;

That way everything will be global like it is in a browser.

require("gsap");

console.log("SAME: ", global === GreenSockGlobals); // true

TweenMax.to(foo, 1, { x: 100, ease: Power3.easeOut});
var tl = new TimelineMax();
Link to comment
Share on other sites

  • 1 month later...

I'm trying to use TweenMax with webpack and es6. I'd really like to avoid including all the gsap modules (as well as keep them out of the global scope). The workaround from OSUblake works, but then I have to modify the source and it still includes all the modules. Is there a better way to handle this? Thanks!

Link to comment
Share on other sites

As of today, no, I'm not aware of a different solution. Sorry. Keep in mind, though, that you can define a GreenSockGlobals if you prefer not to have all of the classes added to the global scope. Literally just create a variable at the root level named GreenSockGlobals, make it an object, and then load the GreenSock files - everything will get added to that object instead. 

  • Like 1
Link to comment
Share on other sites

To do what Jack is talking about, add this right below the _gsScope var.

var _gsScope = (typeof(module)...;

// ADD THIS
_gsScope.GreenSockGlobals = {};

Now the GreenSock classes will no longer be global.

require("gsap");

console.log("SAME: ", global === GreenSockGlobals); // false
  • Like 1
Link to comment
Share on other sites

  • 1 year later...

Thank You!

I'm going to try these out asap!

Link to comment
Share on other sites

  • 1 year later...

Hello, I have difficulties to understand how to load GSAP plugins with "require".

 

require("gsap"); // works like a charme
require("gsap/PixiPlugin.js"); //dont seems to be working

 

Did I do something wrong?

What is the best way to load GSAP plugin with browserify?

 

My project use the last version of NPM, Browserify, Pixi and GSAP.

 

I m a beginer so I would apreciate your help  :) Thank you in advance!

Link to comment
Share on other sites

Hm, I'm not familiar with Browserify. I have this general impression that its use is on the decline in favor of other tools like webpack, rollup, etc.

 

What happens in your code? Are you getting errors? Do the PixiJS animations just not work (silently)? It'd help to know more specifics about what's going on. 

  • Like 1
Link to comment
Share on other sites

Sorry for the false question and the wast of time. I managed to resolve this issue by myself :) 

It seems i have made a stupid error in my code. 

 

require("gsap/PixiPlugin.js"); 

 

Works well!

 

By the way thank you to tell me about the other tools!

  • Like 1
Link to comment
Share on other sites

Great, glad you worked it out. Thanks for letting us know. Happy tweening!

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