title: ScrollMagic - Uncaught ReferenceError: ScrollScene is not defined
body: <p>Why does the latest version of <a href="http://scrollmagic.io/" rel="nofollow noreferrer">ScrollMagic</a> gives me this error below?</p>
  
  <blockquote>
    <p>Uncaught ReferenceError: ScrollScene is not defined</p>
  </blockquote>
  
  <p>This is my test code following this <a href="https://scotch.io/tutorials/building-interactive-scrolling-websites-with-scrollmagic-js" rel="nofollow noreferrer">guide</a>:</p>
  
  <pre><code>$(function() {
      // Init Controller
      var scrollMagicController = new ScrollMagic();
  
      // Create Animation for 0.5s
      var tween = TweenMax.to('#animation', 0.5, {
          backgroundColor: 'rgb(255, 39, 46)',
          scale: 7,
          rotation: 360
      });
  
      // Create the Scene and trigger when visible with ScrollMagic
      var scene1 = new ScrollScene({
          triggerElement: '#scene',
          offset: 150 /* offset the trigger 150px below #scene's top */
      })
      .setTween(tween)
      .addTo(scrollMagicController);
  
      // Add debug indicators fixed on right side
      scene1.addIndicators();
  });
  </code></pre>
  
  <p>If I am using this latest version:</p>
  
  <pre><code>&lt;script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.min.js"&gt;&lt;/script&gt;
  &lt;script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/debug.addIndicators.min.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>The full error:</p>
  
  <pre><code>Uncaught ReferenceError: ScrollScene is not defined
      at HTMLDocument.&lt;anonymous&gt; (basic.php:66)
      at c (jquery.min.js:3)
      at Object.fireWith [as resolveWith] (jquery.min.js:3)
      at Function.ready (jquery.min.js:3)
      at HTMLDocument.H (jquery.min.js:3)
  </code></pre>
  
  <p>But if I use this version (older I guess) and it works fine:</p>
  
  <pre><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/1.3.0/jquery.scrollmagic.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/1.3.0/jquery.scrollmagic.debug.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>My HTML:</p>
  
  <pre><code>  &lt;div class="post"&gt;
          &lt;span class="glyphicon glyphicon-grain"&gt; &lt;/span&gt;
          &lt;h2&gt; Lorem ipsum dolor sit amet, consetetur sadipscing elitr&lt;/h2&gt;
      &lt;/div&gt;
  
      &lt;div class="post" id="scene"&gt;
          &lt;span class="glyphicon glyphicon-lamp" id="animation"&gt; &lt;/span&gt;
          &lt;h2&gt; Lorem ipsum dolor sit amet, consetetur sadipscing elitr&lt;/h2&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>any ideas why?</p>
  
  <p><strong>EDIT:</strong></p>
  
  <p>If I use this guide from <a href="https://github.com/janpaepke/ScrollMagic/wiki/Getting-Started-:-How-to-use-ScrollMagic" rel="nofollow noreferrer">github</a>:</p>
  
  <pre><code>// Init Controller
  var scrollMagicController = new ScrollMagic.Controller();
  
  // Create Animation for 0.5s
  var tween = TweenMax.to('#animation', 0.5, {
      backgroundColor: 'rgb(255, 39, 46)',
      scale: 7,
      rotation: 360
  });
  
  // Create the Scene and trigger when visible with ScrollMagic
  var scene1 = new ScrollMagic.Scene({
      triggerElement: '#scene',
      offset: 150 /* offset the trigger 150px below #scene's top */
  })janpaepke-ScrollMagic/scrollmagic/minified/plugins/debug.addIndicators.min.js
  .setTween(tween)
  .addTo(scrollMagicController);
  
  // Add debug indicators fixed on right side
  scene1.addIndicators();
  </code></pre>
  
  <p>I will get this error:</p>
  
  <pre><code>Uncaught TypeError: (intermediate value).setTween is not a function
      at HTMLDocument.&lt;anonymous&gt; (basic.php:70)
      at c (jquery.min.js:3)
      at Object.fireWith [as resolveWith] (jquery.min.js:3)
      at Function.ready (jquery.min.js:3)
      at HTMLDocument.H (jquery.min.js:3)
  </code></pre>
  
  <p>Why!???? The documentation they have is just awful!</p>
  
  <p><strong>EDIT 2:</strong></p>
  
  <p>So I use the downloaded version:</p>
  
  <pre><code>&lt;script src="libs/janpaepke-ScrollMagic/js/lib/greensock/TweenMax.min.js"&gt;&lt;/script&gt;
  &lt;script src="libs/janpaepke-ScrollMagic/scrollmagic/minified/plugins/animation.gsap.min.js"&gt;&lt;/script&gt;
  
  &lt;!-- should be replaced with minified version when development is finished --&gt;
  &lt;script src="libs/janpaepke-ScrollMagic/scrollmagic/minified/plugins/jquery.ScrollMagic.min.js"&gt;&lt;/script&gt;
  
  &lt;!-- should be removed when development is finished --&gt;
  &lt;script src="libs/janpaepke-ScrollMagic/scrollmagic/minified/plugins/debug.addIndicators.min.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>I get even more errors:</p>
  
  <pre><code> jquery.ScrollMagic.min.js:2 Uncaught TypeError: Cannot read property '_util' of undefined
      at jquery.ScrollMagic.min.js:2
      at jquery.ScrollMagic.min.js:2
      at jquery.ScrollMagic.min.js:2
  (anonymous) @ jquery.ScrollMagic.min.js:2
  (anonymous) @ jquery.ScrollMagic.min.js:2
  (anonymous) @ jquery.ScrollMagic.min.js:2
  debug.addIndicators.min.js:2 Uncaught TypeError: Cannot read property '_util' of undefined
      at debug.addIndicators.min.js:2
      at debug.addIndicators.min.js:2
      at debug.addIndicators.min.js:2
  (anonymous) @ debug.addIndicators.min.js:2
  (anonymous) @ debug.addIndicators.min.js:2
  (anonymous) @ debug.addIndicators.min.js:2
  basic.php:65 Uncaught ReferenceError: ScrollMagic is not defined
      at HTMLDocument.&lt;anonymous&gt; (basic.php:65)
      at c (jquery.min.js:3)
      at Object.fireWith [as resolveWith] (jquery.min.js:3)
      at Function.ready (jquery.min.js:3)
      at HTMLDocument.H (jquery.min.js:3)
  </code></pre>
  
  <p>The file names and folder structure are completely a mess. confusing and inconsistent!</p>