Animating with Intersection Observer

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>

<!-- ... -->

Contents hide

Answers:

Method 1

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

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

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes

Article Rating