Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
vanillabass

Trouble with require.js r.js and TweenMax

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 all,

I've retrofit a project to use require.js. When I optimize using r.js and rhino, I get a min file with no errors. However when I load the app using the .min file, I get an error saying "cannot call the method 'to' of undefined". The method 'to' belongs to TweenMax. When I load the app using the non-optimized code, it works no problem.

Here is the log from the terminal when running r.js:

Tracing dependencies for: ../js/main
Cannot optimize network URL, skipping: http://a.vimeocdn.com/js/froogaloop2.min.js
Uglifying file: /Users/---/prototype/js/main.min.js

Users/---/prototype/js/main.min.js

Users/---/prototype/js/libs/requirejs/require.js
Users/---/prototype/js/libs/jquery/jquery-1.7.1.min.js
Users/---/prototype/js/libs/underscore/underscore-amd.js
Users/---/prototype/js/libs/backbone/backbone-amd.js
Users/---/prototype/js/libs/greensock/uncompressed/TweenMax.js
Users/---/prototype/js/libs/greensock/uncompressed/plugins/CSSPlugin.js
Users/---/prototype/js/akinsparker/views/APVideoView.js
Users/---/prototype/js/text.js
text!templates/ProfileElement.html
Users/---/prototype/js/akinsparker/views/ProfileElementView.js
text!templates/CollagePiece.html
Users/---/prototype/js/akinsparker/views/CollagePieceView.js
text!templates/ProjectPiece.html
Users/---/prototype/js/akinsparker/views/ProjectPieceView.js
Users/---/prototype/js/akinsparker/APHelper.js
Users/---/prototype/js/akinsparker/router/Workspace.js
Users/---/prototype/js/libs/isotope/jquery.isotope.js
Users/---/prototype/js/akinsparker/views/ProjectView.js
Users/---/prototype/js/libs/imagesloaded/jquery.imagesloaded.js
Users/---/prototype/js/akinsparker/views/APMainView.js
Users/---/prototype/js/libs/mCustomScrollbar/uncompressed/jquery.mCustomScrollbar.js
Users/---/prototype/js/libs/mCustomScrollbar/uncompressed/jquery.mousewheel.js
Users/---/prototype/js/akinsparker/models/CollageElement.js
Users/---/prototype/js/akinsparker/collections/APCollageCollection.js
Users/---/prototype/js/akinsparker/models/ProfileElement.js
Users/---/prototype/js/akinsparker/collections/APTeamCollection.js
Users/---/prototype/js/app.js
Users/---/prototype/js/../js/main.js

Here is a link to all the code including the build folder which houses my build settings.

https://www.dropbox.com/sh/oyepi7n1kwqrzmr/QS94f_UtfR

At this point this is beyond my level of understanding so any advice would be greatly appreciated!

Thanks!

Link to comment
Share on other sites

Hmm, that sounds more like a RequireJS-specific question. In my experience, RequireJS can be very finicky and based on the error you're getting, it seems like it's not defining TweenMax correctly internally (which, again, isn't a GSAP problem as much as a RequireJS issue). Have you tried asking the RequireJS folks? 

Link to comment
Share on other sites

On a related note - is there a guide somewhere on using GSAP with Require or other module loaders? I could only find a few random forum posts but given the number of globals it creates I'm keen to get it properly shimmed/set up.

Link to comment
Share on other sites

If you're worried about the globals, you can easily have GSAP tuck all its globals into a single object of your choosing by defining a "GreenSockGlobals" object at the window level. This (along with RequireJS) is discussed here:

http://forums.greensock.com/topic/7145-using-with-requirejs/?view=findpost&p=26684

 

And I'd also recommend this thread:

http://forums.greensock.com/topic/7213-using-timelinelite-and-tweenlite-with-requirejs/

 

There's a link there to James Burke's response: https://groups.google.com/forum/?fromgroups=#!topic/requirejs/viPGj6-SdQY

 

Frankly, I think RequireJS has some severe limitations that make it awkward to use with a lot of libraries, but hopefully they'll address that in future versions. 

 

I'm curious: what's your concern about the globals thing? Are you just philosophically opposed to global variables? 

Link to comment
Share on other sites

Not particularly, I'm fairly pragmatic about these things but when it's a significant number I do get a little concerned at the possibility of losing an hour trying to debug a really weird error caused by an accidental name collision. For example I actually already had something called RoughEase inside one scope.

Link to comment
Share on other sites

After more research I found that adding it as a shim worked and compiled correctly in r.js

 

 

 "libs/greensock/uncompressed/TweenMax" : 
 {deps: ["jquery"],
  exports :"TweenMax"
 },
 
Although TweenMax doesn't have a dependency on jquery I don't see the harm in doing this as a 'quick fix'.  Additionally, I removed the window.GreensockAMDPath and haven't noticed any issues.
 
Anyone have any thoughts on why this works?
Link to comment
Share on other sites

  • 4 months later...

FYI for anyone else having issues with Require and GSAP files, I just ran into an issue with Draggable even though I had defined it as a shim.  If you simply add TweenMax as a dependency for Draggable it will fix the issue and Draggable will load through Require as expected.  Hope that helps someone down the line :)

  • Like 4
Link to comment
Share on other sites

  • 4 months later...

Thank you! Exactly the advice I needed!

 

FYI for anyone else having issues with Require and GSAP files, I just ran into an issue with Draggable even though I had defined it as a shim.  If you simply add TweenMax as a dependency for Draggable it will fix the issue and Draggable will load through Require as expected.  Hope that helps someone down the line :)

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