Jump to content
Search Community

Using TweenLite / TimelineLite server-side with node.js

Clemorphy 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

I'm not personally familiar with Node.js (although I've heard great things) but I can't imagine why it wouldn't work as long as there's at least a setTimeout() method and a "window" object defined (you could probably even just define window as an empty object like window = {} before loading TweenLite). 

 

I'm curious what you'd use TweenLite or TimelineLite for in Node.js. 

  • Like 1
Link to comment
Share on other sites

Actually I want to handle the mechanics of an online game directly on the server.

And in order to change enemies positions, I need to tween some values server-side.

Enemies have a path (chaining tweens), and they can slow down or accelerate on this path. So TimelineLite would be really appropriate for this.

 

But for now I don't know how to deal with TweenMax.js file.

In node.js you can't simply include a JS file.

There is a "require" method but it only works with modules, which are built in a specific way, with some exported functions and vars (http://nodejs.org/api/modules.html)

 

There are some modules related to tweening (https://nodejsmodules.org/tags/tween), but none of them seem to include the same functionalities as TimelineLite.

Link to comment
Share on other sites

  • 4 months later...

I was searching for this too, i m making a game and i need to synch tweens between clients and server, so it d be the best if both use the same library.

 

I found a way thanks to jack's reply, it s easy:

just take a tweenmax or tweenlite (min or uncom) file and put a 

 

       var window = {};

 

at begging and then

 

       module.exports = window.TweenLite; // or TweenMax

 

at the end of the file.

 

then load the file in the main app 

 

       var TweenLite = require('TweenLite.min.js'); //or whatever your file name is in the "node_modules" folder

 

you're good to go.

  • Like 1
Link to comment
Share on other sites

  • 1 month later...

Unfortunately I cannot get this working. I get the following error using this technique for TweenMax

lib/TweenMax.min.js:17
+?\)/i,D=/,(?=[^\)]*(?:\(|$))/gi,M=Math.PI/180,I=180/Math.PI,F={},E=document,N
                                                                    ^
ReferenceError: document is not defined

Link to comment
Share on other sites

If you don't need a TweenMax-specific feature (like repeat, repeatDelay, or yoyo), you could just use TweenLite instead. If you do need TweenMax, I assume you don't need CSSPlugin if you're running this headless/browserless, so you can just delete that portion of the TweenMax file (it's pretty clearly marked). CSSPlugin needs the document and document.createElement() stuff for obvious reasons, but again, if you're not using it in a browser I can't imagine you'd need CSSPlugin anyway. Right? 

Link to comment
Share on other sites

You're right, I've just got in the habit of just always using TweenMax, I'll switch to TweenLite.

Yeh Node is just a container running a javascript runtime I'm just tweening object properties on entities for my game serverside.

 

Thanks for your help, and for developing one of a greatest libraries ;)

  • Like 1
Link to comment
Share on other sites

  • 11 months later...

Hey guys, I'm not sure if this still is an issue but this topic was the first that appeared on google for me.

I got TimelineMax working on node.js.

// 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;

That's all. You simply just need to provide the few window and document methods that TweenMax is testing.

Maybe this helps other people who also find this topic through google.

 

(ofcourse removing the css portion from tweenmax is still the cleanest way)

  • Like 1
Link to comment
Share on other sites

  • 9 months later...
So I followed, Sebastian Nette's example for getting this to run on the server.  I wasn't able to solve the dependencies missing issue; this doesn't seem to effect anything so far (tested TweenlineMax,TweenMax,Easing,etc.).  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 - 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 } };

2 - 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; somehow a ends up undefined

       i = a.length;

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

        delete _tweenLookup[p]; // ** I'm thinking this is the culprit; should be spliced;
    }
  }
}

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

module.exports = _gsScope;

4 - How to use:

var gsap = require('gsap');

var TimelineLite = gsap.TimelineLite;

var TweenMax = gsap.TweenMax;

var Easing = gsap.Easing;
Here is a link to my github repo where I put my working TweenMax.js script:   HERE
 
I am still getting these errors: 
 
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?

Also, why don't these fixed already exist?
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...