255 Uncaught ReferenceError: $ is not defined after adding ScrollMagic

Question

I was trying to use ScrollMagic but it is not working when I inspect element it is giving this

error255 Uncaught ReferenceError: $ is not defined

Even tho I've included all the libraries in the header and the actual script on the bottom of the page.

Header

<script src="js/ScrollMagic.min.js"></script>
<script src="js/debug.addIndicators.min.js"></script>
<script src="js/animation.gsap.min.js"></script>
<script src="js/animation.velocity.min.js"></script>

Script

<script>
    $(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);
    });
</script>

The section where I'm using it.

<div id="designPart">
  <p>Design</p>
  <section class="panel pink">
    <img src="images/pink.png">
  </section>
  <section class="panel green">
    <img src="images/green.png">
  </section>
  <section class="panel red">
    <img src="images/red.png">
  </section>
  <section class="panel blue">
    <img src="images/blue.png">
  </section>
  <section class="panel white">
    <img src="images/white.png">
  </section>
</div><!--designPart-->

Answer 1

You do not seem to be loading the jQuery library itself (and ScrollMagic uses jQuery) - and the error message is simply telling you that there is no jQuery object to reference with the "$" variable

Make sure that you load the jQuery PRIOR to the ScrollMagic, so that the jQuery namespace exists before ScrollMagic requires it, as Snowmonkey states in the comments below.

You need to either load jQuery from a local source eg:

<script src="js/jquery-2.1.1.js"></script>

or from a cdn

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

One advantage of loading a common library like jQuery from a CDN (Content Delivery Network) is that there is a fair chance that users will already have it cached in their browsers from other web activity and if it is cached, the browser does not need to load it again.

Answer 2

$(function() {
      
  var controller = new ScrollMagic.Controller();

  var wipeAnimation = new TimelineMax()
  .fromTo("section.panel.pink",  1, {x: "100%"}, {x: "0%", ease: Linear.easeNone})
  .fromTo("section.panel.green", 1, {x: "100%"}, {x: "0%", ease: Linear.easeNone})
  .fromTo("section.panel.red",   1, {x: "100%"}, {x: "0%", ease: Linear.easeNone})
  .fromTo("section.panel.blue",  1, {x: "100%"}, {x: "0%", ease: Linear.easeNone})
  .fromTo("section.panel.white", 1, {x: "100%"}, {x: "0%", ease: Linear.easeNone});

  // create scene to pin and link animation
  new ScrollMagic.Scene({
      triggerElement: "#designPart",
      triggerHook: "onLeave",
      duration: "300%"
  })
  .setPin("#designPart")
    .setTween(wipeAnimation)
    .addIndicators()
    .addTo(controller);
});

section img {
  height: 32px;
  width: 32px;
}

<!-- those are all the libraries required:-->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/animation.velocity.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/animation.gsap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/debug.addIndicators.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TimelineMax.min.js"></script>

<div id="designPart">
  <p>Design</p>
  <section class="panel pink">
    <img src="https://www.sqlite.org/images/nocopy.gif">
  </section>
  <section class="panel green">
    <img src="https://www.sqlite.org/images/nocopy.gif">
  </section>
  <section class="panel red">
    <img src="https://www.sqlite.org/images/nocopy.gif">
  </section>
  <section class="panel blue">
    <img src="https://www.sqlite.org/images/nocopy.gif">
  </section>
  <section class="panel white">
    <img src="https://www.sqlite.org/images/nocopy.gif">
  </section>
</div>