2

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?

Victor Ferreira
  • 6,151
  • 13
  • 64
  • 120

2 Answers2

6

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.

Jan Paepke
  • 1,997
  • 15
  • 25
  • thanks for the explanation on file names! i actually renamed them because I created the js files manually and just then copied the content. and I had no idea that greensock was the manufacturer o GSAP. after getting errors I opened SM the page source and download the js inside `greensock/` so I assumed it was a different thing about the jquery loading, it waits until the dependencies finish loading, so that it can download a specific file. wasn't it expected? so if any code inside that specific JS file uses another lib that hasn't been loaded yet triggers automatically, it won't fail – Victor Ferreira Apr 30 '15 at 13:47
  • What your js code does is essentially what happens, if you just use html tags. They are loaded successively. So you found a more complicated way to do exactly the same. That is the basic difference between sync and async. If you will put them into html successively nothing will happen until the file is loaded, which is exactly what your code is mimicking. I suggest to read up on sync vs async loading. – Jan Paepke Apr 30 '15 at 14:50
  • assume that `a.js` has a function that triggers on load that uses `b.js`. also assume that `a.js` is saved locally and `b.js` uses a slow cdn and/or is 5 times larger than `a.js`. even if you declare the script tag that refers to `b.js` before `a.js`, `a.js` will be loaded first and its code will run without the existance of `b.js` so it can be asyn in terms of other components. the code will request (and consequentially run) a.js just after b.js is properly load. other components will run independently. i will. when I test it (i bet it is right, though) – Victor Ferreira Apr 30 '15 at 15:36
  • Victor, I'm not getting into a comment argument here, but you are wrong :). If the script tag for `b.js` is before the script tag of `a.js` nothing inside of `a.js` will be executed, until `b.js` was loaded and executed. (unless you use the asnc tag: http://www.w3schools.com/tags/att_script_async.asp) This behavior is the whole reason why scripts like require.js exist or people put their script tags at the bottom of the DOM. trust me.... – Jan Paepke May 01 '15 at 12:27
  • Also, to quote from the page I linked above: "If neither async or defer is present: The script is fetched and executed immediately, before the browser continues parsing the page" – Jan Paepke May 01 '15 at 12:29
4

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>
Jan
  • 14,894
  • 1
  • 12
  • 6