Animating with Intersection Observer-CodePudding

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>

<!-- ... -->

CodePudding user response：

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:

Move the <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.
Wrap all the JS logic in a function that is invoked after the DOMContentLoaded event is fired