Jump to content
Search Community

Draggable/TweenMax with RequireJS and r.js

Manu 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

Hi everyone,

I use TweenMax and Draggable (GSAP 1.15.0) with RequireJS for a project.
My require config is :
 

require.config({
    paths: {
        TweenMax: '../../local/js-vendor/gsap/src/uncompressed/TweenMax',
        Draggable: '../../local/js-vendor/gsap/src/uncompressed/utils/Draggable',
    },
    shim: {
        Draggable: {
            deps: ['TweenMax']
        }
    }
});

It works like expected.

But i have problem during the minification step with the r.js tool.
The compiler looks for the TweenLite file, but doesn't find it.

I have found in this thread http://greensock.com/forums/topic/7213-using-timelinelite-and-tweenlite-with-requirejs/ that I can set the paths like this :
 

require.config({
    paths: {
        TweenMax: '../../local/js-vendor/gsap/src/uncompressed/TweenMax',
        Draggable: '../../local/js-vendor/gsap/src/uncompressed/utils/Draggable',

        TweenLite: 'TweenMax'
    }
});

But now the error is that the TweenMax file is not found.

If I do directly
 

require.config({
    paths: {
        TweenMax: '../../local/js-vendor/gsap/src/uncompressed/TweenMax',
        Draggable: '../../local/js-vendor/gsap/src/uncompressed/utils/Draggable',

        TweenLite: '../../local/js-vendor/gsap/src/uncompressed/TweenLite'
    }
});

it works as expected.
But TweenLite is packaged two times (inside TweenMax + TweenLite directly)

A workaround is exclude TweenLite with the compiler options.
 

requirejs: {
      compile: {
         options: {
            paths:{
               'TweenLite':'empty:'
            }
         }
      }
   }

I don’t know if there is a better way to fix the problem, but for the moment it works for me.
Hope it helps.
And I’m all ears if someone has a best solution.

 

Link to comment
Share on other sites

  • 1 year later...

Hi Manu,

 

I have a similar issue, but unfortunately your fix didn't work for me.

Another weird thing is that just a normal shim works for me on Windows, but on a Unix system, the issue persists.

 

What I did figure out is that the AMD setup for require.js might not be correct for some plugins.

 

As you look at the bottom of Draggable.js, you see:
 

//export to AMD/RequireJS and CommonJS/Node (precursor to full modular build system coming at a later date)
(function(name) {
	"use strict";
	var getGlobal = function() {
		return (_gsScope.GreenSockGlobals || _gsScope)[name];
	};
	if (typeof(define) === "function" && define.amd) { //AMD
		define(["../TweenLite", "../plugins/CSSPlugin"], getGlobal);
	} else if (typeof(module) !== "undefined" && module.exports) { //node
		require("../TweenLite.js");
		require("../plugins/CSSPlugin.js");
		module.exports = getGlobal();
	}
}("Draggable"));

On line 2276, where the AMD setup is used, it looks for TweenLite one folder up (../).
This does not work with r.js setup for me because it tries to look for TweenLite one folder higher than the baseUrl.

 

When using require I always define the paths for my libraries anyway so for me it's not really convient that it uses relative paths.

When I change that line to:

define(["TweenLite", "CSSPlugin"], getGlobal);

and I set the paths for these plugins myself, everything works fine with the optimizer.

 

Anyway I really dislike having to change vendor code since it's not playing well with a Bower setup, so I copy-pasted the plugins to a plugin folder outside the vendor folder..

 

Don't know if it's totally the same as your issue, but would be great if it can be confirmed if this can or should change.

 

Best, Thijs

Link to comment
Share on other sites

On line 2276, where the AMD setup is used, it looks for TweenLite one folder up (../).

This does not work with r.js setup for me because it tries to look for TweenLite one folder higher than the baseUrl.

 

When using require I always define the paths for my libraries anyway so for me it's not really convient that it uses relative paths.

 

That's interesting to hear about the paths because I think the same thing was going on for CommonJS, leading to some changes in v 1.18.5.

http://greensock.com/forums/topic/14274-webpack-and-splittext/?p=60726

  • Like 1
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...