JavaScript Code not running on a Live Sever nor Local Host

I have looked for this solution for days on end and I could not find the answer to why Javascript is not running correctly on the live server extension or local file host. I use Visual Studio Code and I am currently creating a webpage and trying to add JavaScript animations on it. However, its gotten to a point where I decided to copy other people’s JS animations to see if it work for me and it still has not. For this code, I’ve made sure there are no errors whatsoever in the console and that the JS works properly on visual studio code. Both work but animations do not. Heres my code for a simple JS animation taken from How to Animate on Scroll With Vanilla JavaScript.

Note: while even inputting this into the code pen, it seems to run perfectly but it never works on live server or local hosts
JS

const scrollElements = document.querySelectorAll(".js-scroll");

const elementInView = (el, dividend = 1) => {
  const elementTop = el.getBoundingClientRect().top;

  return (
    elementTop <=
    (window.innerHeight || document.documentElement.clientHeight) / dividend
  );
};

const elementOutofView = (el) => {
  const elementTop = el.getBoundingClientRect().top;

  return (
    elementTop > (window.innerHeight || document.documentElement.clientHeight)
  );
};

const displayScrollElement = (element) => {
  element.classList.add("scrolled");
};

const hideScrollElement = (element) => {
  element.classList.remove("scrolled");
};

const handleScrollAnimation = () => {
  scrollElements.forEach((el) => {
    if (elementInView(el, 1.25)) {
      displayScrollElement(el);
    } else if (elementOutofView(el)) {
      hideScrollElement(el)
    }
  })
}

window.addEventListener("scroll", () => { 
  handleScrollAnimation();
});

HTML


<style>
    @import url("https://fonts.googleapis.com/css2?family=Merriweather&family=Merriweather+Sans:wght@300&display=swap");

/*General styling for structure*/
body {
  margin: 0;
  font-family: "Merriweather Sans", sans-serif;
}

.container {
  max-width: 1280px;
  width: 95%;
  margin: 0 auto;
}

header {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-family: "Merriweather", serif;
  height: 100vh;
}

header h2 {
  font-weight: 400;
}

.scroll-container {
  height: 100vh;
  min-height: 450px;
  padding: 2rem 1rem;
  display: flex;
  align-items: center;
  box-sizing: border-box;
}

.scroll-container:nth-of-type(1) {
  background-color: #bdd0c4;
}
.scroll-container:nth-of-type(2) {
  background-color: #f5d2d3;
}
.scroll-container:nth-of-type(3) {
  background-color: #9ab7d3;
}
.scroll-container:nth-of-type(4) {
  background-color: #dfccf1;
}

.scroll-container:nth-of-type(even) {
  flex-direction: row-reverse;
}

.scroll-element,
.scroll-caption {
  width: 50%;
}

.scroll-element {
  min-height: 300px;
  height: 100%;
  background-color: #eaeaea;
}

.scroll-caption {
  margin: 1rem;
}

footer {
  text-align: center;
  padding: 0.5rem 0;
  background-color: #faddad;
}

footer p {
  font-size: 0.75rem;
  margin: 0.25rem 0;
  color: #221133;
}

footer a {
  text-decoration: none;
  color: inherit;
}

@media screen and (max-width: 650px) {
  .scroll-container,
  .scroll-container:nth-of-type(even) {
    flex-direction: column;
    align-content: inherit;
  }

  .scroll-element {
    height: 100%;
  }

  .scroll-element,
  .scroll-caption {
    width: 100%;
  }
}
/**Styling scrollable elements*/

.js-scroll {
  opacity: 0;
  transition: opacity 500ms;
}

.js-scroll.scrolled {
  opacity: 1;
}

.scrolled.fade-in {
  animation: fade-in 1s ease-in-out both;
}

.scrolled.fade-in-bottom {
  animation: fade-in-bottom 1s ease-in-out both;
}

.scrolled.slide-left {
  animation: slide-in-left 1s ease-in-out both;
}

.scrolled.slide-right {
  animation: slide-in-right 1s ease-in-out both;
}



@keyframes slide-in-left {
  0% {
    -webkit-transform: translateX(-100px);
    transform: translateX(-100px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slide-in-right {
  0% {
    -webkit-transform: translateX(100px);
    transform: translateX(100px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes fade-in-bottom {
  0% {
    -webkit-transform: translateY(50px);
    transform: translateY(50px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

</style>




<head>
    <script src="work.js"></script>

</head>
<body>
<header class="container">
    <h1>How to Animate on Scroll With Vanilla JavaScript</h1>
    <h2>Scroll to see the effects
      <p class="animate-arrow">&darr;
      </p>
    </h2>
</header>
  <section class="scroll-container">
    <div class="scroll-element js-scroll fade-in">
  
    </div>
    <div class="scroll-caption">
      This animation fades in.
    </div>
  </section>
  <section class="scroll-container">
    <div class="scroll-element js-scroll fade-in-bottom">
  
    </div>
    <div class="scroll-caption">
      This animation slides in to the top.
    </div>
  </section>
  <section class="scroll-container">
    <div class="scroll-element js-scroll slide-left">
  
    </div>
    <div class="scroll-caption">
      This animation slides in from the left.
    </div>
  </section>
  <section class="scroll-container">
    <div class="scroll-element js-scroll slide-right">
  
    </div>
    <div class="scroll-caption">
      This animation slides in from the right.
    </div>
  </section>
  <footer>
    <p>Animation styles from <a href="https://animista.net" target="_blank">animista.net</a></p>
    <p>
      Pen by <a href="https://www.jemimaabu.com" target="_blank">Jemima Abu</a><span style="color: #D11E15"> &#9829;</span>
    </p>
  </footer>
  </body>

Html is rendered from top to bottom, so when your script is loaded:

<head>
    <script src="work.js"></script>

</head>

the body hasn’t yet been rendered. so this:

const scrollElements = document.querySelectorAll(".js-scroll");

won’t select any elements, because there aren’t any.

codepen takes care of this problem for you. Outside of codepen you will have to either:

  1. implement javascript code to wait html/body has been rendered
  2. move the <script> tag to just before your body close

the latter option certainly being the easier of the two solutions

2 Likes