ScrollMagic is not loading properly

Question

I am trying to use this specific animation of ScrollMagic

http://janpaepke.github.io/ScrollMagic/examples/advanced/parallax_sections.html

But it's very difficult to load the files properly. I am trying to include ScrollMagic, GSAP and GreenSock, but somehow ScrollMagic asks me to load GASP previously and GSAP says Main Module is missing and asks me to load ScrollMagic before itself. I am doing it async with jQuery as follow

$.getScript( "http://localhost/icons/gsap.js", function( data, textStatus, jqxhr ) {
    $.getScript( "http://localhost/icons/scroll.js", function( data, textStatus, jqxhr ) {
        $.getScript( "http://localhost/icons/greensock.js", function( data, textStatus, jqxhr ) {
          //whatever
        });
    });
});

It logs me following errors when gsap is first:

ERROR: The ScrollMagic main module could not be found. Please make sure it's loaded before this plugin or use an asynchronous loader like requirejs ERROR: TweenLite or TweenMax could not be found. Please make sure GSAP is loaded before ScrollMagic or use an asynchronous loader like requirejs.

and this one when scrollmagic is loaded before gasp

ERROR: TweenLite or TweenMax could not be found. Please make sure GSAP is loaded before ScrollMagic or use an asynchronous loader like requirejs.

Did anyone have the same problem before? Do you have a working example to show? How can I fix this loading issues and make an example work?

Answer 1

Well actually you're confusing names here and to be honest: it doesn't help that you renamed the js files.

So let's straighten this out:

ScrollMagic main module is usually ScrollMagic.js, in your case I'm guessing scroll.js.
This is the main library file of ScrollMagic, which should be loaded before all other ScrollMagic plugins, if using synchronous loading.

GSAP is usually TweenMax.js (depending on version), in your case I'm guessing greensock.js.
This is the GreenSock Animation Platform, which can provide the TweenMax, TweenLite, TimelineMax and TimelineLite objects (and potentially others).

ScrollMagic GSAP Plugin is usually plugins/animation.GSAP.js, in your case I'm guessing gsap.js.
This is a ScrollMagic plugin to be able to use GSAP with ScrollMagic. It sort of works like a bridge between them.

Now because it works as a bridge the ScrollMagic GSAP Plugin requires both the ScrollMagic library and the GSAP library to be loaded.
So the right order to load them is either

1. ScrollMagic
2. GSAP
3. ScrollMagic GSAP Plugin

or

1. GSAP
2. ScrollMagic
3. ScrollMagic GSAP Plugin

To avoid these kinds of issues I would first and foremost recommend never to rename javascript library files. While it might be okay if you work alone it will get very confusing for others.

Secondly if you use synchronous loading don't use JavaScript to load them.
Use html tags, which makes their load order much more obvious.
What you're doing in your script isn't asynchronous at all, as your script loads one file after the other, not simultaneously.

If you want to manage loading in js, use an asynchronous loader, like require.js (as suggested in the error message).

With require.js you don't have to care about the order in which you load the files, as that is handled automatically. You can even rename the library files, if you absolutely want to (although I wouldn't recommend it), because coworkers would get a reference in your requirejs config to see what module is in what file.

Answer 2

ok I came here to find the CDN links... here they are in the right order for anyone else wanting the same.... these are required for the ScrollMagic demos to work.

<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/TweenMax.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/animation.gsap.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/debug.addIndicators.js"></script>