JS working in Codepen, but not on Browser

Here's what my code looks like on codepen (ignore broken image):

https://codepen.io/kornstalk/pen/ZEqXrgq

My issue is that whenever the code is run on browser, the animation on the icon breaks - the menu functions just fine (ignore the styling, I'm tweaking it later). This is my first time trying to use JS with HTMl & CSS, and it seems like the error's I've gotten are that Icon is undefined

Here is my full HTML Code:

    <!doctype html>
    <html class="no-js" lang="en">

    <head>
      <meta charset="utf-8">
      <title>Rlayout</title>
      <meta name="description" content="This site will serve as the hub for many sub responsive 
layouts">
      <meta name="viewport" content="width=device-width, initial-  scale=1">

      <meta property="og:title" content="">
      <meta property="og:type" content="">
      <meta property="og:url" content="">
      <meta property="og:image" content="">

      <link rel="manifest" href="site.webmanifest">
      <link rel="apple-touch-icon" href="icon.png">
      <!-- Place favicon.ico in the root directory -->

      <link rel="stylesheet" href="css/normalize.css">

      <link rel="stylesheet" href="css/main.css">
      <meta name="theme-color" content="#fafafa">
      <link rel="preconnect" href="https://fonts.googleapis.com">
      <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

      <!-- Fonts-->

      <!--Providence Sans-->
      <link rel="stylesheet" href="https://use.typekit.net/xzx3vba.css">
    
    </head>

    <body>
      <!-- Place your site's HTML here -->
      <header class="header">
        <img class="logo" src="img/giz2.jpg" alt="This is our company logo">
        <nav class="main-nav">
          <a href="">About</a>
          <span> | </span>
          <a href="">Contact</a>
          <span> | </span>
          <a href="">Work</a>
        </nav>
        <div class="mobile-nav-wrapper">
          <a href="javascript:void(0);" class="icon" data= "hamburger-menu" onclick="myFunction()">
          <span></span>
          <span></span>
          <span></span>
          </a>
          <nav id="myLinks" class="mobile-main-nav">
            <a href="">Work <span></span></a>
            <a href="">About</a>
            <a href="">Contact</a>
          </nav>
        </div>
      </header>



      <footer>
        <p>&copy; 2500</p>
        <div>
          <img src="./img/giz2.jpg" alt="">
          <img src="./img/giz2.jpg" alt="">
        </div>
      </footer>

      <script src="js/main.js"></script>
    </body>

    </html>

I've tried using the code below, which results in no errors, but won't animate:

var Icon = document.querySelector(".icon");
var Icon1 = document.querySelector(".icon span:nth-child(1)");
var Icon2 = document.querySelector(".icon span:nth-child(2)");
var Icon3 = document.querySelector(".icon span:nth-child(3)");

any help would be super appreciated !!!

Solution

As the comments already stated, please look into the browser log and see what errors it gives you.

I would assume that you've forgotten to add the dependency to velocity.js.

Try to add the following in your HTML and test again:

<script src="https://raw.githubusercontent.com/julianshapiro/velocity/master/velocity.min.js"></script>

Edit: And maybe you've even forgotten to include jQuery. As you stated, that $ is not known, ensure that you include jQuery and velocity.

Edit 2

As you didn't quite believe me/us, I even did it myself and it worked flawlessly... I think no further questions are necessary :D Note that you must "enlarge" the code execution to see it in action.

// JS scripts placed here

function myFunction() {
  var x = document.getElementById("myLinks");
  if (x.style.display === "flex") {
    x.style.display = "none";
  } else {
    x.style.display = "flex";
  }
}

var Icon = $(".icon");
var Icon1 = Icon.find("span:nth-child(1)");
var Icon2 = Icon.find("span:nth-child(2)");
var Icon3 = Icon.find("span:nth-child(3)");

Icon.click(function() {
  $(this).toggleClass("active");

  if (Icon.hasClass("active")) {
    Icon1.velocity({
      top: "50%"
    }, {
      duration: 200,
      easing: "swing"
    });
    Icon3.velocity({
        top: "50%"
      }, {
        duration: 200,
        easing: "swing"
      })
      .velocity({
        rotateZ: "90deg"
      }, {
        duration: 800,
        delay: 200,
        easing: [500, 20]
      });
    Icon.velocity({
      rotateZ: "135deg"
    }, {
      duration: 800,
      delay: 200,
      easing: [500, 20]
    });
  } else {
    Icon.velocity("reverse");
    Icon3.velocity({
        rotateZ: "0deg"
      }, {
        duration: 800,
        easing: [500, 20]
      })
      .velocity({
        top: "100%"
      }, {
        duration: 200,
        easing: "swing"
      });
    Icon1.velocity("reverse", {
      delay: 800
    });
  }
});

/* Place CSS styles here */

html {
  scroll-behavior: smooth;
}

body {
  color: purple;
  /* distribute font to entire site */
  font-family: ff-providence-sans-web-pro, sans-serif;
  font-style: normal;
  font-weight: 400;
  background-color: var(--white);
}

:root {
  --grey: #ddd;
  --white: #F5F5F5;
}

img {
  width: 100%;
  height: auto;
}


/* distribute font to all headings */

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'Karla', sans-serif;
  font-style: italic;
  font-weight: 700;
  text-transform: uppercase;
  text-shadow: 5px 4px 7px #00c200;
}

h1 {
  font-size: 74px;
}

.header {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
  justify-content: space-between;
}

.logo {
  max-width: 100px;
}

.main-nav {
  display: flex;
  justify-content: space-between;
  gap: 16px;
}

@media (max-width: 599px) {
  .main-nav {
    display: none;
  }
  .header {
    flex-direction: row;
  }
}

.icon {
  z-index: 1;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: 139px;
  margin-top: -281px;
  width: 44px;
  height: 33px;
  cursor: pointer;
}

.icon span {
  position: absolute;
  left: 0;
  width: 44px;
  height: 3px;
  background-color: black;
}

.icon span:nth-child(1) {
  top: 0;
}

.icon span:nth-child(2) {
  top: 50%;
}

.icon span:nth-child(3) {
  top: 100%;
}

.mobile-main-nav {
  display: none;
  flex-direction: column;
  background-color: var(--white);
  padding-bottom: 38px;
  align-items: center;
  align-content: center;
  margin-left: 20px;
  margin-right: 20px;
  position: absolute;
  top: 178px;
  left: 0;
  right: 0;
}

.mobile-main-nav a {
  padding: 8px;
  text-align: center;
}

.mobile-main-nav a::before {
  content: "";
  padding-top: 20px;
  display: block;
  padding-left: 12rem;
  border-top: 1px solid black;
}

.mobile-main-nav a::after {
  content: "";
  margin-bottom: -18px;
  display: block;
  padding-bottom: 20px;
  border-bottom: 2px solid black;
}

@media (min-width: 1000px) { /* CHANGED FOR DEMO ONLY */
  .mobile-nav-wrapper {
    display: none;
  }
}

@media screen and (min-width: 768px) {
  h1 {
    font-size: 64px;
  }
}

<!doctype html>
<html class="no-js" lang="en">

<head>
  <meta charset="utf-8">
  <title>Rlayout</title>
  <meta name="description" content="This site will serve as the hub for many sub responsive layouts">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <meta property="og:title" content="">
  <meta property="og:type" content="">
  <meta property="og:url" content="">
  <meta property="og:image" content="">

  <link rel="apple-touch-icon" href="icon.png">
  <!-- Place favicon.ico in the root directory -->

  <link rel="stylesheet" href="css/normalize.css">

  <link rel="stylesheet" href="css/main.css">
  <meta name="theme-color" content="#fafafa">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

  <!-- Fonts-->

  <!--Providence Sans-->
  <link rel="stylesheet" href="https://use.typekit.net/xzx3vba.css">

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.2/velocity.min.js"></script>
</head>

<body>
  <!-- Hamburger Menu -->
  <header class="header">
    <img class="logo" src="img/giz2.jpg" alt="This is our company logo">
    <nav class="main-nav">
      <a href="">About</a>
      <span> | </span>
      <a href="">Contact</a>
      <span> | </span>
      <a href="">Work</a>
    </nav>
    <div class="mobile-nav-wrapper">
      <a href="javascript:void(0);" class="icon" data="hamburger-menu">
        <span></span>
        <span></span>
        <span></span>
      </a>
      <nav id="myLinks" class="mobile-main-nav">
        <a href="">Work <span></span></a>
        <a href="">About</a>
        <a href="">Contact</a>
      </nav>
    </div>
  </header>

  <script src="js/main.js"></script>
</body>

</html>