title: 255 Uncaught ReferenceError: $ is not defined after adding ScrollMagic
body: <p>I was trying to use ScrollMagic but it is not working when I inspect element it is giving this </p>
  
  <blockquote>
    <p>error255 Uncaught ReferenceError: $ is not defined</p>
  </blockquote>
  
  <p>Even tho I've included all the libraries in the header and the actual script on the bottom of the page.</p>
  
  <p>Header</p>
  
  <pre><code>&lt;script src="js/ScrollMagic.min.js"&gt;&lt;/script&gt;
  &lt;script src="js/debug.addIndicators.min.js"&gt;&lt;/script&gt;
  &lt;script src="js/animation.gsap.min.js"&gt;&lt;/script&gt;
  &lt;script src="js/animation.velocity.min.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>Script</p>
  
  <pre><code>&lt;script&gt;
      $(function () { // wait for document ready
        // init
        var controller = new ScrollMagic.Controller();
  
        // define movement of panels
        var wipeAnimation = new TimelineMax()
          .fromTo("section.panel.pink", 1, {x: "-100%"}, {x: "0%", ease: Linear.easeNone})  // in from left
          .fromTo("section.panel.green", 1, {x: "100%"}, {x: "0%", ease: Linear.easeNone})  // in from left
          .fromTo("section.panel.red", 1, {x: "-100%"}, {x: "0%", ease: Linear.easeNone})  // in from left
          .fromTo("section.panel.blue", 1, {x: "-100%"}, {x: "0%", ease: Linear.easeNone})  // in from left
          .fromTo("section.panel.white", 1, {x: "-100%"}, {x: "0%", ease: Linear.easeNone})  // in from left
  
        // create scene to pin and link animation
        new ScrollMagic.Scene({
            triggerElement: "#designPart",
            triggerHook: "onLeave",
            duration: "300%"
          })
          .setPin("#designPart")
          .setTween(wipeAnimation)
          .addIndicators() // add indicators (requires plugin)
          .addTo(controller);
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>The section where I'm using it.</p>
  
  <pre><code>&lt;div id="designPart"&gt;
    &lt;p&gt;Design&lt;/p&gt;
    &lt;section class="panel pink"&gt;
      &lt;img src="images/pink.png"&gt;
    &lt;/section&gt;
    &lt;section class="panel green"&gt;
      &lt;img src="images/green.png"&gt;
    &lt;/section&gt;
    &lt;section class="panel red"&gt;
      &lt;img src="images/red.png"&gt;
    &lt;/section&gt;
    &lt;section class="panel blue"&gt;
      &lt;img src="images/blue.png"&gt;
    &lt;/section&gt;
    &lt;section class="panel white"&gt;
      &lt;img src="images/white.png"&gt;
    &lt;/section&gt;
  &lt;/div&gt;&lt;!--designPart--&gt;
  </code></pre>