I've been trying to animate elements of my page when they're in view. I must admit I am a Javascript beginner and all the Code snippets i've found on the internet didn't work either. What exactly is wrong with my code?
Edit: I just noticed my code was working when adding it here as a snippet. I am working with an index.html file on chrome and my stylesheet is definitely linked correctly. I can't find whats wrong. Why is it working here but not on my browser? Is it because I forgot to add something which the stack-overflow code-runner adds automatically?
const options = {
root: null,
rootMargin: '0px',
threshold: 0.5
}
let callback = (entries) => {
entries.forEach(entry => {
if(entry.isIntersecting) {
entry.target.classList.add('isVisible');
} else {
entry.target.classList.remove('isVisible');
}
});
}
let observer = new IntersectionObserver(callback, options);
document.querySelectorAll('.box')
.forEach(box => { observer.observe(box) });section {
width: 100%;
height: 500px;
padding: 50px;
box-sizing: border-box;
display: flex;
justify-content: center;
align-items: center;
}
div {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
width: 80%;
height: 80%;
}
.box {
opacity: 0;
transform: translateY(40px);
transition: all 1s ease-in-out;
}
.box.isVisible {
opacity: 1;
transform: translateY(0);
}<!-- ... -->
<section>
<div class="box">
<h2>
Lorem ipsum dolor sit amed
</h2>
</div>
</section>
<section>
<div class="box">
<h2>
Lorem ipsum dolor sit amed
</h2>
</div>
</section>
<section>
<div class="box">
<h2>
Lorem ipsum dolor sit amed
</h2>
</div>
</section>
<section>
<div class="box">
<h2>
Lorem ipsum dolor sit amed
</h2>
</div>
</section>
<section>
<div class="box">
<h2>
Lorem ipsum dolor sit amed
</h2>
</div>
</section>
<!-- ... -->So based on further information you've provided, the reason why the same code did not work on your machine is due to the placement of the <script> tag. When placed in the <head> of the document, the code in the script is executed directly before the DOM is ready: this means that all your selectors will return undefined at runtime.
Meanwhile in the code snippet used on StackOverflow, whatever JS you've pasted is injected in the end of the <body> element (which hints at a possible solution, see below).
There are two ways to fix this:
<script> tag to the end of the <body> element. In this way, when the JS is evaluated the DOM has already been parsed and ready.DOMContentLoaded event is fired