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

$(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>