Using TimelineLite and TweenLite with requirejs

[ALFer]

Hello. I have project with few AMD modules. Each of these uses and TimelineLite and TweenLite. But the modules are not loaded correctly. For example:

 

define(
    [
        "jquery",
        "libs/gsap/TimelineLite",
        "libs/gsap/TweenLite"
    ],
    function($, TimelineLite, TweenLite) {

 

 

so, here TimelineLite - undefined but TweenLite - defined =|

What I'm doing wrong? =)

 

Btw, I think that

 

var GreenSockAMDPath = "libs/gsap";

 

 

looks not so AMD-style (global variable) =( 

[ALFer]

I can provide any additional information if needed... =( Really tried a lot of options

[Carl]

Hi and welcome to the GreenSock forums. Sorry to hear you are having trouble.

Did you try the files here: http://forums.greensock.com/topic/7145-using-with-requirejs/#entry26768

 

Are they not working for you?

 

If you can zip up a very simple bare-bones demo of your files not working, we'll take a look at them.

[ALFer]

Yes, I read that topic (from it I learned about the GreenSockAMDPath) and that project working well. But, I'm not used GSAP files from zips in my project (is there are modified TweenMax file?). 

I have a bit of different situation from that topic =( See, I create simple project with my situation (in attach). I know that in this particular class there is no need in TimelineLite, but I have another "classes" that need it...

 

 

PS: Sorry for my English =)

GSAP_RequireJS.zip

[Carl]

I apologize that I know absolutely nothing about the finer points of require.js, but if you add or move the GreenSockAMDPath setting to the top of PointsCounter.js like so:

 

 

 

var GreenSockAMDPath = "libs/gsap";
define(
    [
        "jquery",
        "libs/gsap/TimelineLite",
        "libs/gsap/TweenLite"
    ],

 

your file will run with no errors.

 

If I can get you a better answer about why it wasn't working the other way I will.

[ALFer]

Thank you for response. I'll check until Monday  =)

[ALFer]

So, I checked it out... And it doesn't work =(

[ALFer]

I've found solution for my problem.

 

just by adding this shim to requirejs config:

 

shim: {
    "libs/gsap/TimelineLite": {
        deps:    ["libs/gsap/TweenLite"],
        exports: "TimelineLite"
    }
}

[Carl]

weird. I know I had it working. Perhaps I changed something else. Sorry for the confusion. Glad you got it working on your end. Thanks for posting the solution.

[GreenSock]

I know you got it working, but for anyone else who stumbles across this post, I figured I'd mention that James Burke said you could do this:

 

//This assumes TweenMax.js is in the baseUrl directory, if not,
//adjust the path value accordingly
requirejs.config({
  paths: {
    'TweenLite': 'TweenMax',
    'TimelineLite': 'TweenMax',
    'TimelineMax': 'TweenMax'
  }
});

Take from the thread at: https://groups.google.com/forum/?fromgroups=#!topic/requirejs/viPGj6-SdQY

[shovemedia]

The above approach is a bit overkill -- it'll include more code than you probably need (ie, all of TweenMax). My approach could do with more work; it'd be much better if the _gsDefine and _gsQueue were done away with entirely and replaced with require.js calls

 

1) wrap the js files you need with:

 

define(function(require){

 

  // ORIGINAL CODE HERE

 

  return TweenLite; // for example

 

});

 

2) For plugins, etc, you'll need to make sure that TweenLite is available before executing the plugin code. If you don't do this, you'll have a race condition and it'll work sometimes depending on which file gets loaded first:

 

 

define(function(require){

 

  require('lib/greensock/TweenLite'); // your path may vary

 

  // ORIGINAL CODE HERE

 

  return CSSPlugin; // for example

 

});

 

 

3) Your custom module now merely needs something like:

 

 

var CSSPlugin = require('lib/greensock/plugins/CSSPlugin');

var TweenLite = require('lib/greensock/TweenLite');

[GreenSock]

That's a great solution, but doesn't it create a dependency on requirejs? One of our goals was to avoid any dependencies on 3rd party tools. As much as you may scoff at this idea, there are quite a few developers who just don't want to use requirejs either because they find it confusing, cumbersome, or too costly in terms of kb. I'm not arguing for or against requirejs specifically (I actually think it's pretty cool) - I'm just saying I don't want to author GSAP such that it depends on requirejs.

 

Without _gsQueue and _gsDefine, I'm not sure how we'd be able to accommodate the loading of various GreenSock files in any order. You'd be surprised how many people get tripped up over simple things like the order of loading files, so we're trying to remove any potential headaches for users. If you've got any better ideas (that don't create dependencies on 3rd party tools), I'm all ears. 

[shovemedia]

Absolutely. I wasn't suggesting that the official distribution be modified to create a hard dependency on requirejs, and I agree with your design approach.

 

My understanding is that there *are* ways to make it work with both, but I'm not currently prepared to invest that kind of time. Certainly not until I feel like I've got a better handle on nodejs modules. By that point, it's possible that ECMAScript harmony module definitions will be "the" answer.

[iDVB]

I'm also using RequireJS and having issues...

I have this in my paths...

paths: {
    'jquery': 'bower_components/jquery/jquery',
    'TweenLite': 'bower_components/greensock/src/uncompressed/TweenLite',
    'TimelineLite': 'bower_components/greensock/src/uncompressed/TimelineLite',
    'TimelineMax': 'bower_components/greensock/src/uncompressed/TimelineMax',
  },

this is my shim....

 shim: {
    'TimelineLite' : {
      deps: ['TweenLite'],
      exports: 'TimelineLite'
    }
  }

and this is at the top of my app.js

define([
      'jquery',
      'TimelineLite'
    ],

This is my code...

TweenLite.to($('.test'), 1.5, {width:50, height:50, onComplete:function(){console.log('COMPLETED!');}});

Which seems to run just fine and return "COMPLETED!" to the console. However, ".test" does not animate whatsoever.  I have tried all this same code, for IDs and Classes for 3-4 different objects on the page and the result is the same.  

 

When I start from scratch and load the GSAP in http://jsfiddle.net/ it works just fine.

So I'm doing something right since I'm not getting any errors.... but nothings seems to actually work.

 

?

HeLP! 

 

[GreenSock]

I haven't had a chance to look at this in-depth, but didn't you accidentally type TimelineLite instead of TweenLite? You set an export to TimelineLite, but then in your code you are referencing TweenLite. See what I mean? (I may be misunderstanding something here)

[iDVB]

Nope. I fixed it. The issue was that TweenLite doesn't seem to work. 

When I use TweenMax it works fine.

 

GSAP is a really great tool. You guys should consider reorganizing you bower package and including AMD support, even if it means supporting two versions in the bower package.

 

Cheers

[jamiejefferson]

The reason the tween wasn't working without TweenMax was that you hadn't included CSSPlugin (which is included in the TweenMax file).

 

Without CSSPlugin, all tweens are done on direct properties of the target object (i.e. target.width), which won't work for properties that should be applied as a style (i.e. target.style.width). With CSSPlugin, it will detect that width/height should be applied to the element's style attribute and you'll see the visual changes.

[GreenSock]

UPDATE (2014-07-25): We released GSAP 1.13.1 which improved compatibility with RequireJS and other tools like Browserify too. You can get a zip download with a RequireJS demo showing exactly how it's done here: http://www.greensock.com/dl/RequireJS_and_GSAP.zip

[Wills]

Hi Jack,

 

That link is now 404'ing. Can you point me in the direction of that file?

 

Many thanks

 

Edit: After a bit of digging, I think I've found it in the release blog post. Here is an updated link for the sample Require JS project.