Jump to content
Search Community

Using TimelineLite and TweenLite with requirejs

ALFer 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

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) =( 

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

  • Like 1
Link to comment
Share on other sites

  • 3 months later...

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');
Link to comment
Share on other sites

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. 

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

  • 6 months later...

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! 

 

  • Like 1
Link to comment
Share on other sites

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

  • Like 1
Link to comment
Share on other sites

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.

  • Like 2
Link to comment
Share on other sites

  • 7 months later...
  • 4 weeks later...

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