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 snippet , it seems to run perfectly but it never works on live server or local hosts
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">↓
</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"> ♥</span>
</p>
</footer>
</body>
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();
});
