chapter3 _mobileTest.html

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>

    <meta charset="utf-8">

    <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Gudea|Hind+Madurai|Oxygen:300|Rubik" rel="stylesheet">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.1/css/all.css" integrity="sha384-O8whS3fhG2OnA5Kas0Y9l3cfpmYjapjI0E4theH4iuMD+pLhbf6JI0jIMfYcK3yZ" crossorigin="anonymous">
    <link rel="stylesheet" href="./css/general0.css">
    <link rel="stylesheet" href="./css/chapter3_mobileTest.css">

    <!-- Global site tag (gtag.js) - Google Analytics -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-133914635-1"></script>
    <script>
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());

      gtag('config', 'UA-133914635-1');
    </script>

    <title>Chapter 3 Demo Mobile Test - OKAI</title>

  </head>

  <body>

    <div class="scrollBar" id="myBar"></div>

    <div id="neuronLottie" class="animation animLeft upperLayer"></div>
    <div id="activationLottie" class="animation animLeft threeLayer"></div>

    <div id="brainText" class="bg-3grey firstScene">
      <div class="text right">
        <h2>Chapter 3 <br>The Building Block of ANN</h2>
        <hr>
        <p>Early deep learning researchers in the 1970s took inspiration from a
          neuron, the building block of our brain, to create an algorithm called
          a perceptron.</p>
        <p>Therefore, to understand what a perceptron is, let’s first take a look at a neuron. </p>
      </div>
    </div>

    <div id="nerveText" class="bg-3grey scene">
      <div class="text right">
        <p>A neuron is made up of 3 main parts:</p>
        <ul>
          <li><p>Dendrites: Spread out receivers of the neuron that
            takes in some stimulus from other neurons.</p></li>
          <li><p>Soma: The “core” of the cell where the nucleus is situated
            at, and it decides if a signal will be sent to other neurons.</p></li>
          <li><p>Axon: Long extending neck of the neuron that passes
             a signal to all connected neurons. </p></li>
        </ul>
      </div>
    </div>

    <div id="neuron1Text" class="scene bg-grey upperLayer">
      <div class="text left">
        <h3>
          From Neuron to Perceptron
        </h3>
        <hr>
        <p>The perceptron, similarly, also has 3 major parts:</p>
        <ul>
          <li><p>Inputs [Dendrites]: inputs take in values from an arbitrary number
            of sources and pass it to the perceptron.</p></li>
          <li><p>Perceptron [Soma]: the perceptron algorithm takes in the inputs
            and assigns a weight to each input. It then calculates the weighted
            sum of all inputs (the sum of all weight * input), then adds a bias on to of that.</p></li>
          <li><p>
            Output [Axon]t: the output of the perceptron spits out the result of the calculation.
          </p></li>
        </ul>


</p>
      </div>
    </div>

    <div id="neuron2Text" class="scene bg-grey upperLayer">
      <div class="text left">
        <p>Between [two neurons], the biological axon-to-dendrite connection is simplified to an <strong>edge</strong>, and
           signals transmitted are represented with <strong>numbers</strong>.
        </p>

        <p>The input on top is connected to the central neuron with a <strong>thick</strong> edge,
          thus the signal is amplified by a factor of 2 when it reaches the neuron.
        </p>

      </div>
    </div>

    <div id="neuron3Text" class="scene bg-grey upperLayer">
      <div class="text left">
        <p>The input at the bottom, however, has a <strong>thinner</strong> connection to the neuron,
          thus the signal is reduced to 2, resulting in a final signal of <strong>2 + 2 = 4</strong> received, instead of
          3 + 2 = 5.
        </p>
        <p>
          The thickness of the edge is called <strong>weight</strong> in machine learning.
        </p>
      </div>
    </div>

    <div id="neuron4Text" class="scene bg-grey upperLayer">
      <div class="text left">
        <p>Next, the neuron processes the signal by shaking itself. In this case, doing so incremented the signal by 1.
        </p>
        <p>
          The “shakiness” of a neuron is called <strong>bias</strong>, which can both increase or decrease the value of the signal by any set amount.
        </p>
      </div>
    </div>

    <div id="neuron5Text" class="scene bg-grey upperLayer">
      <div class="text left">
        <p>Finally, an <strong>activation function</strong> is used to simulate how "fired" the neuron is.</p>
        <p>
          <strong>ReLU</strong>, a type of activation functions, is used here. It preserves the signal value if it is 0 or greater.
        </p>
        <p>
          In our case, a positive signal would fully fire the neuron, so the value 5 is preserved and becomes the final output of the neuron.
        </p>
      </div>
    </div>

    <div id="appanana1Text" class="scene topLayer bg-white">
      <div class="text right">
        <h3>
          Activation Functions
        </h3>
        <hr>
        <p>
          Early researchers use these perceptrons to model how human beings think.
          In spite of early successes, they quickly ran into a problem.
          When a researcher wants to predict how likely an animal with 2 legs
          and 2 arms is a human, the probability the model gives back would often
          be <strong>above 100% or below 0%</strong>.
        </p>
        <p>
          Intuitively, this isn’t possible, but to the machine, it is just trying
          to estimate a number, and it does not know if that number is meaningful.
        </p>
      </div>
    </div>

    <div id="appanana2Text" class="scene topLayer bg-white">
      <div class="text right">
        <p>
          To tackle such problems, the researchers put an <strong>activation function</strong>
          behind the output of the perceptron, which can control the output range of that perceptron.
        </p>
        <p>
          For example, <strong>ReLu</strong> and <strong>Sigmoid</strong> are
          functions that are commonly used. These functions allow the perceptron
          to limit its output to a specific range so that it would not spit out
          invalid outputs.
        </p>
      </div>
    </div>

    <div id="appanana3Text" class="scene topLayer bg-white">
      <div class="text right">
        <p>
          <strong>ReLu</strong>, which we have already seen, makes the final output value non-negative.
          It preserves the value of the output as long as it is greater than 0.
          If the output is equal to or below 0, it would simply output 0. This
          function is by far <strong>the most popular</strong> activation function, and you can
          find it being used in areas like <strong>Computer Vision</strong> and
          <strong>Speech Recognition</strong>.
        </p>
      </div>
    </div>

    <div id="appanana4Text" class="scene topLayer bg-white">
      <div class="text right">
        <p>
          <strong>Sigmoid</strong> calculates the probability of two things, for example, if you
          want to classify if an image is a cat or isn’t a cat (this is called
          <strong>binary classification</strong>), you would want to use a
          sigmoid activation function, which transforms
          the output value into a probability (a number between 0 and 1).
        </p>
      </div>
    </div>


    <!-- beginning of neuronAnimation -->
    <div id="neuronAnimation" class="animation animRight upperLayer">

      <svg id="neuronSys" class="neuronSVG" version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 600">

        <defs>
        <filter color-interpolation-filters="sRGB" id="goo">
            <feGaussianBlur in="SourceGraphic" stdDeviation="8" result="blur" />
            <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 21 -9" result="cm" />
            <feBlend/>
          </filter>
        </defs>

        <!-- <rect fill="#f1f1f1" x="0" y="0"  width="600" height="600"/> -->

        <g id="neuronGroup" filter="url(#goo)">
          <line id="dendrites1" class="dendrites" x1="186" y1="214" x2="266" y2="275"/>
          <line id="dendrites2" class="dendrites" x1="184" y1="387" x2="268" y2="324"/>

          <line class="axon" x1="407" y1="300" x2="340" y2="300"/>

          <g id="neuron">
            <circle class="whitespace" cx="300" cy="300" r="41"/>
          </g>

          <g class="input" id="input1">
            <circle class="whitespace" cx="162" cy="196" r="29"/>
          </g>

          <g class="input" id="input2">
            <circle class="whitespace" cx="162" cy="404" r="29"/>
          </g>

          <g class="output" id="output">
            <circle class="whitespace" cx="434" cy="301" r="29.5"/>
          </g>


          <line id="inTransit1" class="inTransit" x1="186" y1="214" x2="266" y2="275"/>
          <line id="inTransit2" class="inTransit" x1="184" y1="387" x2="268" y2="324"/>


          <g class="signal" id="topSignal">
            <circle class="st1" cx="162" cy="195" r="20"/>
          </g>

          <g class="signal" id="botSignal">
            <circle class="st1" cx="162" cy="403.7" r="20"/>
          </g>

          <circle id="cenSig" cx="300" cy="300" r="30"/>
          <circle id="cenSig3" cx="300" cy="300" r="30"/>

          <circle id="outSig" cx="434" cy="301" r="25"/>

        </g>

        <g id="num1" class="num">
          <path d="M163.7,185.7c0.4,0.4,0.5,0.8,0.5,1.3V205c0,0.5-0.2,1-0.6,1.3c-0.4,0.4-0.9,0.5-1.5,0.5c-0.6,0-1.1-0.2-1.4-0.5
          c-0.4-0.4-0.6-0.8-0.6-1.3v-14.7l-1.9,1.2c-0.3,0.2-0.6,0.3-1,0.3c-0.5,0-1-0.2-1.3-0.6s-0.5-0.8-0.5-1.3c0-0.3,0.1-0.6,0.3-0.9
          c0.2-0.3,0.4-0.5,0.7-0.7l4.7-2.8c0.4-0.2,0.8-0.3,1.3-0.3C162.9,185.1,163.3,185.3,163.7,185.7z"/>
        </g>

        <g id="num3" class="num">
          <path d="M166.2,402.2c0.9,0.6,1.6,1.4,2,2.4c0.5,1,0.7,2.1,0.7,3.2c0,1.5-0.3,2.8-1,4c-0.7,1.1-1.6,2-2.9,2.6
            c-1.2,0.6-2.7,0.9-4.3,0.9c-0.7,0-1.5-0.1-2.2-0.3c-0.7-0.2-1.4-0.4-2-0.7c-0.8-0.4-1.1-1-1.1-1.7c0-0.5,0.2-1,0.5-1.4
            c0.4-0.4,0.8-0.6,1.3-0.6c0.4,0,0.9,0.2,1.3,0.5c0.9,0.7,1.9,1,2.9,1c0.6,0,1.3-0.2,1.8-0.5c0.6-0.3,1-0.8,1.4-1.4
            c0.4-0.6,0.5-1.3,0.5-2.1c0-1.1-0.3-2-1-2.6c-0.7-0.6-1.5-0.9-2.4-0.9c-0.4,0-0.8,0-1.1,0.1c-0.3,0.1-0.5,0.1-0.6,0.2
            c-0.5,0.2-1,0.2-1.3,0.2c-0.5,0-0.8-0.2-1.1-0.5c-0.3-0.3-0.4-0.7-0.4-1.2c0-0.3,0.1-0.5,0.2-0.8c0.1-0.2,0.3-0.5,0.5-0.7l4.8-5.2
            h-6.1c-0.5,0-0.9-0.2-1.2-0.5c-0.3-0.3-0.5-0.7-0.5-1.2c0-0.5,0.2-0.9,0.5-1.2c0.3-0.3,0.7-0.5,1.2-0.5h9.5c0.6,0,1.1,0.2,1.4,0.5
            c0.3,0.3,0.5,0.8,0.5,1.3c0,0.5-0.2,1-0.7,1.5l-4.2,4.6C164.3,401.2,165.3,401.5,166.2,402.2z"/>
        </g>

        <g class="num">
          <path id="num2" d="M309.6,311.7c0.5,0.5,0.7,1.1,0.7,1.8c0,0.7-0.2,1.3-0.7,1.7c-0.5,0.5-1.1,0.7-1.8,0.7h-15.3c-0.8,0-1.4-0.2-1.8-0.7
          c-0.5-0.5-0.7-1.1-0.7-1.8c0-0.7,0.3-1.4,0.8-2l9.8-10.5c1.1-1.2,2-2.4,2.6-3.6c0.6-1.2,1-2.3,1-3.4c0-1.4-0.5-2.5-1.4-3.5
          c-1-1-2.1-1.5-3.3-1.5c-0.9,0-1.7,0.3-2.6,0.9s-1.7,1.4-2.4,2.3c-0.5,0.7-1.2,1.1-2.1,1.1c-0.7,0-1.3-0.3-1.8-0.8
          c-0.6-0.5-0.8-1.1-0.8-1.7c0-0.5,0.1-0.9,0.5-1.4c0.3-0.5,0.7-1,1.3-1.6c1.1-1.1,2.5-2.1,4-2.7s2.9-1,4.3-1c2,0,3.7,0.4,5.2,1.3
          c1.5,0.8,2.7,2,3.5,3.5c0.8,1.5,1.2,3.1,1.2,5c0,1.8-0.5,3.7-1.5,5.6c-1,1.9-2.3,3.8-3.9,5.6l-5.7,6.1h9.3
          C308.5,311,309.1,311.3,309.6,311.7z"/>
        </g>

        <g class="num">
          <path id="num4" d="M311.4,303c0.5,0.5,0.7,1.1,0.7,1.8c0,0.7-0.2,1.3-0.7,1.7c-0.5,0.5-1.1,0.7-1.8,0.7h-1.9v5.8c0,0.8-0.3,1.4-0.8,2
            c-0.5,0.5-1.2,0.8-2,0.8c-0.8,0-1.4-0.3-1.9-0.8c-0.5-0.5-0.8-1.2-0.8-2v-5.8h-11.7c-0.7,0-1.3-0.3-1.8-0.8
            c-0.6-0.5-0.9-1.1-0.9-1.9c0-0.7,0.2-1.3,0.7-1.8l14.2-17.4c0.6-0.7,1.3-1.1,2.3-1.1c0.7,0,1.4,0.3,1.9,0.8c0.5,0.5,0.8,1.2,0.8,2
            v15.3h1.9C310.3,302.3,310.9,302.5,311.4,303z M295,302.3h7.3v-9L295,302.3z"/>
        </g>

        <g class="num">
          <path id="numBig3"d="M306.2,297c1.3,0.9,2.3,2.1,2.9,3.5c0.7,1.5,1,3,1,4.7c0,2.2-0.5,4.1-1.5,5.7c-1,1.6-2.4,2.9-4.2,3.8s-3.9,1.3-6.3,1.3
            c-1.1,0-2.2-0.1-3.2-0.4s-2-0.6-2.8-1.1c-1.1-0.6-1.7-1.4-1.7-2.4c0-0.7,0.3-1.4,0.8-2c0.5-0.6,1.1-0.9,1.8-0.9
            c0.6,0,1.2,0.2,1.9,0.7c1.3,1,2.7,1.5,4.3,1.5c0.9,0,1.8-0.2,2.7-0.7c0.8-0.5,1.5-1.1,2-2c0.5-0.9,0.8-1.9,0.8-3
            c0-1.6-0.5-2.9-1.5-3.8c-1-0.9-2.2-1.4-3.5-1.4c-0.6,0-1.1,0.1-1.6,0.2c-0.5,0.1-0.7,0.2-0.8,0.2c-0.8,0.2-1.4,0.4-1.9,0.4
            c-0.7,0-1.2-0.2-1.6-0.7c-0.4-0.5-0.6-1-0.6-1.7c0-0.4,0.1-0.8,0.2-1.1c0.1-0.3,0.4-0.7,0.8-1.1l7-7.6h-8.9c-0.7,0-1.3-0.2-1.8-0.7
            c-0.5-0.5-0.7-1.1-0.7-1.8c0-0.7,0.2-1.3,0.7-1.7c0.5-0.5,1.1-0.7,1.8-0.7h13.8c0.9,0,1.6,0.2,2.1,0.7c0.5,0.5,0.7,1.1,0.7,2
            c0,0.7-0.4,1.4-1.1,2.2l-6,6.7C303.4,295.6,304.9,296.1,306.2,297z"/>

        <g class="num">
          <path id="numBig5" d="M305,295.7c1.6,0.9,2.9,2.2,3.8,3.8c0.9,1.6,1.4,3.4,1.4,5.3c0,2-0.6,3.9-1.7,5.6c-1.1,1.7-2.7,3.1-4.5,4.1
            c-1.9,1-3.9,1.5-6.1,1.5c-1.2,0-2.4-0.2-3.6-0.5c-1.2-0.4-2.3-0.9-3-1.5c-0.4-0.3-0.7-0.7-0.9-1.3s-0.4-1-0.4-1.5
            c0-0.5,0.2-1,0.7-1.5c0.5-0.4,1.1-0.7,1.8-0.7c0.5,0,1.2,0.3,2,0.9c1.3,0.8,2.4,1.2,3.3,1.2c1.2,0,2.4-0.3,3.5-0.9
            c1.1-0.6,1.9-1.3,2.6-2.3c0.6-1,1-2,1-3.1c0-1.6-0.6-2.9-1.7-4c-1.1-1-2.4-1.5-4-1.5c-0.7,0-1.3,0.1-1.8,0.3
            c-0.5,0.2-1.2,0.5-1.9,0.8c-0.5,0.3-1,0.5-1.3,0.6c-0.3,0.1-0.6,0.2-1,0.2c-1.2,0-2-0.3-2.5-0.9c-0.5-0.6-0.7-1.4-0.7-2.3
            c0-0.3,0-0.5,0-0.6l1.4-11.2c0.1-0.6,0.4-1.1,0.9-1.6c0.5-0.4,1.1-0.6,1.8-0.6h13c0.7,0,1.3,0.2,1.8,0.7s0.7,1.1,0.7,1.8
            c0,0.7-0.2,1.3-0.7,1.7c-0.5,0.5-1.1,0.7-1.8,0.7h-11.2l-0.9,6.5c0.6-0.3,1.3-0.6,2.2-0.8c0.9-0.2,1.7-0.3,2.5-0.3
            C301.6,294.4,303.4,294.8,305,295.7z"/>
        </g>

        <g class="num">
          <path id="numOut5" d="M437.6,298c1.1,0.7,2,1.5,2.7,2.7c0.7,1.1,1,2.4,1,3.8c0,1.4-0.4,2.8-1.2,4c-0.8,1.2-1.9,2.2-3.2,2.9
            c-1.3,0.7-2.8,1.1-4.4,1.1c-0.8,0-1.7-0.1-2.6-0.4c-0.9-0.3-1.6-0.6-2.2-1.1c-0.3-0.2-0.5-0.5-0.6-0.9c-0.2-0.4-0.3-0.7-0.3-1.1
            c0-0.4,0.2-0.7,0.5-1c0.3-0.3,0.8-0.5,1.3-0.5c0.4,0,0.9,0.2,1.4,0.6c0.9,0.6,1.7,0.8,2.4,0.8c0.9,0,1.7-0.2,2.5-0.6
            c0.8-0.4,1.4-0.9,1.8-1.6c0.5-0.7,0.7-1.4,0.7-2.2c0-1.2-0.4-2.1-1.2-2.8c-0.8-0.7-1.7-1.1-2.8-1.1c-0.5,0-0.9,0.1-1.3,0.2
            s-0.8,0.3-1.4,0.6c-0.4,0.2-0.7,0.3-0.9,0.4c-0.2,0.1-0.5,0.1-0.7,0.1c-0.8,0-1.4-0.2-1.8-0.7c-0.4-0.4-0.5-1-0.5-1.6
            c0-0.2,0-0.4,0-0.4l1-7.9c0.1-0.4,0.3-0.8,0.7-1.1c0.4-0.3,0.8-0.4,1.3-0.4h9.2c0.5,0,0.9,0.2,1.3,0.5c0.3,0.3,0.5,0.8,0.5,1.3
            c0,0.5-0.2,0.9-0.5,1.2c-0.3,0.3-0.8,0.5-1.3,0.5H431l-0.6,4.6c0.4-0.2,0.9-0.4,1.5-0.6c0.6-0.1,1.2-0.2,1.8-0.2
            C435.1,297,436.4,297.3,437.6,298z"/>
        </g>

        <g id="ReLU">
        	<path d="M359.7,301v3.7H358v-9.4h2.9c0.6,0,1.2,0.1,1.6,0.2c0.5,0.1,0.8,0.3,1.1,0.6c0.3,0.2,0.5,0.5,0.6,0.9
        		c0.1,0.3,0.2,0.7,0.2,1.1c0,0.3,0,0.6-0.1,0.9c-0.1,0.3-0.2,0.5-0.4,0.8c-0.2,0.2-0.4,0.4-0.6,0.6c-0.3,0.2-0.6,0.3-0.9,0.4
        		c0.2,0.1,0.4,0.3,0.6,0.5l2.4,3.5h-1.6c-0.2,0-0.3,0-0.4-0.1c-0.1-0.1-0.2-0.1-0.3-0.3l-2-3c-0.1-0.1-0.2-0.2-0.2-0.2
        		c-0.1,0-0.2-0.1-0.4-0.1H359.7z M359.7,299.7h1.1c0.3,0,0.6,0,0.9-0.1c0.2-0.1,0.4-0.2,0.6-0.3c0.2-0.1,0.3-0.3,0.4-0.5
        		c0.1-0.2,0.1-0.4,0.1-0.7c0-0.5-0.2-0.8-0.5-1.1c-0.3-0.3-0.8-0.4-1.4-0.4h-1.1V299.7z"/>
        	<path d="M369.5,297.9c0.4,0,0.8,0.1,1.2,0.2c0.4,0.1,0.7,0.3,0.9,0.6c0.3,0.3,0.5,0.6,0.6,0.9s0.2,0.8,0.2,1.3
        		c0,0.1,0,0.2,0,0.3c0,0.1,0,0.1-0.1,0.2c0,0-0.1,0.1-0.1,0.1s-0.1,0-0.2,0h-4.1c0,0.7,0.2,1.2,0.6,1.5c0.3,0.3,0.7,0.5,1.3,0.5
        		c0.3,0,0.5,0,0.7-0.1c0.2-0.1,0.4-0.1,0.5-0.2s0.3-0.1,0.4-0.2c0.1-0.1,0.2-0.1,0.3-0.1c0.1,0,0.1,0,0.2,0c0,0,0.1,0.1,0.1,0.1
        		l0.5,0.6c-0.2,0.2-0.4,0.4-0.6,0.5c-0.2,0.1-0.5,0.3-0.7,0.3c-0.2,0.1-0.5,0.1-0.7,0.2c-0.2,0-0.5,0.1-0.7,0.1
        		c-0.5,0-0.9-0.1-1.3-0.2c-0.4-0.2-0.7-0.4-1-0.7c-0.3-0.3-0.5-0.7-0.7-1.1c-0.2-0.4-0.3-1-0.3-1.5c0-0.5,0.1-0.9,0.2-1.3
        		c0.1-0.4,0.4-0.8,0.6-1c0.3-0.3,0.6-0.5,1-0.7C368.6,298,369,297.9,369.5,297.9z M369.6,299c-0.5,0-0.8,0.1-1.1,0.4
        		c-0.3,0.3-0.4,0.6-0.5,1.1h3c0-0.2,0-0.4-0.1-0.6c-0.1-0.2-0.1-0.3-0.3-0.5c-0.1-0.1-0.3-0.2-0.4-0.3
        		C370,299.1,369.8,299,369.6,299z"/>
        	<path d="M375.9,303.2h3.8v1.4h-5.5v-9.4h1.7V303.2z"/>
        	<path d="M385.1,303.2c0.3,0,0.6-0.1,0.9-0.2s0.5-0.3,0.7-0.5c0.2-0.2,0.3-0.5,0.4-0.7c0.1-0.3,0.1-0.6,0.1-1v-5.6h1.7
        		v5.6c0,0.6-0.1,1.1-0.3,1.6s-0.4,0.9-0.8,1.2c-0.3,0.3-0.7,0.6-1.2,0.8c-0.5,0.2-1,0.3-1.6,0.3c-0.6,0-1.1-0.1-1.6-0.3
        		c-0.5-0.2-0.9-0.5-1.2-0.8c-0.3-0.3-0.6-0.8-0.8-1.2c-0.2-0.5-0.3-1-0.3-1.6v-5.6h1.7v5.6c0,0.4,0,0.7,0.1,1
        		c0.1,0.3,0.2,0.5,0.4,0.7c0.2,0.2,0.4,0.4,0.7,0.5C384.5,303.2,384.8,303.2,385.1,303.2z"/>
        </g>
    </svg>

    <!-- end of neuronAnimation -->
    </div>

  <!-- Boostrap JavaScript -->
  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> -->

  <script type="text/javascript" src="./js/TweenMax.min.js"></script>
  <script type="text/javascript" src="./js/DrawSVGPlugin.min.js"></script>
  <script type="text/javascript" src="./js/GSDevTools.min.js"></script>
  <script type="text/javascript" src="./js/Draggable.min.js"></script>
  <script type="text/javascript" src="./js/MorphSVGPlugin.min.js"></script>
  <script type="text/javascript" src="./js/lottie.js"></script>

  <!-- ScrollMagic JavaScript -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/animation.gsap.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5//plugins/debug.addIndicators.js"></script>

  <script type="text/javascript" src="./js/chapter3.js"></script>

  </body>
</html>