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

Share this post


Link to post
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 = {};

?

Share this post


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

Share this post


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

Share this post


Link to post
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();

Share this post


Link to post
Share on other sites

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!

Share this post


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

Share this post


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

Share this post


Link to post
Share on other sites

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!

Share this post


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

Share this post


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

Share this post


Link to post
Share on other sites

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

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.

×