Jump to content
Search Community

Using with require.js

7daysofrain test

By 7daysofrain
in GSAP

Moderator Tag
 Share

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

GreenSock test

GreenSock

Posted
Posted

Sure, I've attached a simple example. However, keep in mind that RequireJS is rather limited in the sense that it recognizes one module per file whereas the GSAP files define multiple classes/modules in a single file. Like TweenLite.js also defines Ease, Strong, Quad, Cubic, Quart, Quint, Linear, etc. And TweenMax defines CSSPlugin, BezierPlugin, a bunch of eases, TweenLite, TimelineLite, TimelineMax, etc. all in a single file. We did that because it makes loading more efficient and it prevents users from having to manage tons of files.

GSAP defines its critical classes in the global scope for convenience, so you can just reference them there very easily. If you prefer to tuck them into a custom object, you can do that by defining a GreenSockGlobals object at the global level, like:
 

var gs = window.GreenSockGlobals = {}; //after TweenMax loads, you can reference it now as gs.TweenMax


Let us know if you have any questions.

requirejs_and_tweenmax.zip

  • Like 1
Link to comment
Share on other sites
gsockk test

gsockk

Posted
Posted

Hi,

 

Thanks for the sample and the great library Jack!

Unfortunately the sample fails when you move TweenMax to a sub directory

 

Folder structure:

./js  ./greensock    ./TweenMax.js  ./main_req.js  ./require.js
main_req.js:

require(["greensock/TweenMax"], function {	TM.to(...);});
Link to comment
Share on other sites
GreenSock test

GreenSock

Posted
Posted

Ah yes, if you're going to nest things like that, you just need to set a global "GreenSockAMDPath" variable that points to the directory where you're storing the GreenSock files, like:

 

 

 

//for GreenSock classes to work with AMD tools like RequireJS, you must set a GreenSockAMDPath global variable pointed at the main directory where you're storing the GreenSock files
var GreenSockAMDPath = "greensock";
require(["greensock/TweenMax"], function™ {
    TM.to(...);
});
 

 

requirejs_and_tweenmax.zip

  • Like 1
Link to comment
Share on other sites
  • 11 months later...
tolborg test

tolborg

Posted
Posted

Im doing it like this:

require.config({

  baseUrl: '/ui/js',

  paths: {
    jquery:    'modules/libs/jquery-1.10.2',
    tweenmax:  'modules/vendor/greensock-js/TweenMax'
  },

  shim: {
    jquery: {
      exports: 'jQuery'
    },
    tweenmax: {
      exports: 'TweenMax'
    }
});

define([
  'jquery',
  'tweenmax'
], function($, TweenMax) {

  console.log(TweenMax);

});
  • Like 1
Link to comment
Share on other sites
  • 1 month later...
Iskren test

Iskren

Posted
Posted

I try using CDN,requirejs &  TimelineMax
here is the js code

require.config({
    //enforceDefine: true, //for errors in IE
    baseUrl: 'support/Animation/src/minified',
    paths: {
        jquery: [
            'http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min',
            'http://code.jquery.com/jquery-1.11.0.min',
            //'jquery.min',
        ],
        timelinemax:  [
            "http://cdnjs.cloudflare.com/ajax/libs/gsap/1.11.3/TimelineMax.min",
        ],
    },
    shim: {
        jquery: {exports: '$'},
        timelinemax: { exports: 'TimelineMax',},
    }
});


define(['jquery', 'timelinemax'], function ($, TM) {
    if (TM !== undefined) {
        $("#a").text("OK fine");
    } else {
        $("#a").text("smth wrong with the shim");
    }
});

here is the html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">


<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script data-main="scripts/try" src="scripts/require.js" defer></script>
</head>
<body>
    <div id="a"></div>
</body>
</html>

and the result is that "smth wrong with the shim"

when I call the TM it doesnt do the job or thows exception.

THe only way I could get work was to add the tag in the html:

    <script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.11.5/TweenMax.min.js" defer></script>

The thing is that requirejs says that there is no define() call ... the GSAP lib uses windows._gsDefine() wich is different from the requirejs probably.

please inform me when that is fixed.

Link to comment
Share on other sites
GreenSock test

GreenSock

Posted
Posted

I'm not very familiar with require.js and this seems like more of a question for their support team, but I can assure you that GSAP does call the define() method internally when setting up the classes/prototypes, as suggested by require.js. See line 101 of TweenLite.

 

I wonder if the problem you're running into has to do with the fact that you don't appear to be loading TweenMax anywhere, but you're loading TimelineMax. TimelineMax requires TweenLite and TimelineLite, so you need to either load those too or just load TweenMax which has ALL of those.

 

It seems as if there's a limitation of require.js that won't easily allow multiple definitions in one file (which I think is a major shortcoming). Again, you may want to contact the require.js developer(s).

  • Like 1
Link to comment
Share on other sites
  • 1 year 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
 Share
Go to topic listing

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...