Elements not fading in on user scroll

Question

Attempting to make image elements fade up when user scrolls down through page. Currently, images are not showing up at all. There is an issue with the JS, but not sure how else to trouble shoot. HTML, CSS, and JS below. A fresh set of eyes would probably be most helpful. Thank you!

const faders = document.querySelectorAll('.fade-in');
const appearOptions = {
threshold: 1,
rootMargin: "0px 0px -100px 0px",
};

const appearOnScroll = new IntersectionObserver(function(entries,
appearOnScroll) {
entries.forEach(entry => {
    if (!entry.isIntersecting) {
        return;
    } else {
        entry.target.classList.add('appear');
        appearOnScroll.unobserve(entry.target);
    }
    })
    }, 
    appearOptions);

    faders.forEach(fader => {
    appearOnScroll.observe(fader);
    })

And my HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="js/observer.js"></script>
<title>Document</title>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<main>
    <h3>Design Studio Project</h3>
    <div class="videowrapper">
    <video controls="controls" width="1920" height="1080" 
   name="studioProject" type="mov" src="images/web_StudioProject_rd03.mp4"></video>
    </div>
    <div class="remainingslides">
    <img class="fade-in" src="images/remaining_keyframes-01.png">
    <img class="fade-in" src="images/remaining_keyframes-02.png">
    <img class="fade-in" src="images/remaining_keyframes-03.png">
    <img class="fade-in" src="images/remaining_keyframes-04.png">
    <img class="fade-in" src="images/remaining_keyframes-05.png">
    <img class="fade-in" src="images/remaining_keyframes-06.png">
    <img class="fade-in" src="images/remaining_keyframes-07.png">
    <img class="fade-in" src="images/remaining_keyframes-08.png">
    <img class="fade-in" src="images/remaining_keyframes-09.png">
</div>
</main>
<script src="js/observer.js"></script>
</body>
</html>

and CSS

.fade-in {
opacity: 0;
transition: opacity 250ms ease-in;
}
.fade-in.appear {
opacity: 1;
}

https://stackoverflow.com/help/minimal-reproducible-example – Andy Hoffman Aug 04 '20 at 21:32 — Andy Hoffman, Aug 04 '20 at 21:32

score 1 · Answer 1 · answered Aug 04 '20 at 21:54

There are a few issues with your code:

In your HTML you are referring to your js file twice.

https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API

I also cleaned up how you were calling IntersectionObserver and passing the callback/options.

The error that pops up is apparently a known "non" issue:

ResizeObserver - loop limit exceeded

const faders = document.querySelectorAll('.fade-in');
var appearOptions = {
  threshold: 1,
  rootMargin: "0px 0px -100px 0px",
};

const appearOnScroll = new IntersectionObserver((entries,
    appearOptions) => {
    
    entries.forEach(entry => {
      if (!entry.isIntersecting) {
        return;
      } else {
        entry.target.classList.add('appear');
        appearOnScroll.unobserve(entry.target);
      }
    })
  });

faders.forEach(fader => {
  appearOnScroll.observe(fader);
})

.fade-in {
    opacity: 0;
    transition: opacity 250ms ease-in;
    }
    .fade-in.appear {
    opacity: 1;
    }

<main>
        <h3>Design Studio Project</h3>
        <h2>The Most Important Revolutions</h2>
        <p>Lauren Miggins</p>
        <p>Summer 2020</p>
        <div class="videowrapper">
        <video controls="controls" width="1920" height="1080" 
       name="studioProject" type="mov" src="images/web_StudioProject_rd03.mp4"></video>
        </div>
        <div class="remainingslides">
        <img class="fade-in" src="https://via.placeholder.com/800">
        <img class="fade-in" src="https://via.placeholder.com/800">
        <img class="fade-in" src="https://via.placeholder.com/800">
        <img class="fade-in" src="https://via.placeholder.com/800">
        <img class="fade-in" src="https://via.placeholder.com/800">
        <img class="fade-in" src="https://via.placeholder.com/800">
        <img class="fade-in" src="https://via.placeholder.com/800">
        <img class="fade-in" src="https://via.placeholder.com/800">
        <img class="fade-in" src="https://via.placeholder.com/800">
    </div>
    </main>

score 0 · Answer 2 · answered Aug 04 '20 at 21:37

You've added observer.js 2 times on your page. But your other stuff is working for me.

I do not have your images and video, so I removed video for this example and make images to be just a red squares.

Strange, but it is working in Snippet editor, but not in view mode!

Anyway, here is the same in jsfiddle: click.

const faders = document.querySelectorAll('.fade-in');
const appearOptions = {
  threshold: 1,
  rootMargin: "0px 0px -100px 0px",
};

const appearOnScroll = new IntersectionObserver(function(entries,
    appearOnScroll) {
    entries.forEach(entry => {
      if (!entry.isIntersecting) {
        return;
      } else {
        entry.target.classList.add('appear');
        appearOnScroll.unobserve(entry.target);
      }
    })
  },
  appearOptions);

faders.forEach(fader => {
  appearOnScroll.observe(fader);
})

.fade-in {
  opacity: 0;
  transition: opacity 250ms ease-in;
}

.fade-in.appear {
  opacity: 1;
}

/* Helpers: */

main {
  width: 800px;
}

img {
  display: inline-block;
  border: 1px solid red;
  background: red;
  min-width: 200px;
  min-height: 200px;
}

<main>
    <h3>Design Studio Project</h3>
    <h2>The Most Important Revolutions</h2>
    <p>Lauren Miggins</p>
    <p>Summer 2020</p>
    <div class="videowrapper">
    <!--video controls="controls" width="1920" height="1080" 
   name="studioProject" type="mov" src="images/web_StudioProject_rd03.mp4"></video-->
    </div>
    <div class="remainingslides">
    <img class="fade-in" src="images/remaining_keyframes-01.png">
    <img class="fade-in" src="images/remaining_keyframes-02.png">
    <img class="fade-in" src="images/remaining_keyframes-03.png">
    <img class="fade-in" src="images/remaining_keyframes-04.png">
    <img class="fade-in" src="images/remaining_keyframes-05.png">
    <img class="fade-in" src="images/remaining_keyframes-06.png">
    <img class="fade-in" src="images/remaining_keyframes-07.png">
    <img class="fade-in" src="images/remaining_keyframes-08.png">
    <img class="fade-in" src="images/remaining_keyframes-09.png">
</div>
</main>

Elements not fading in on user scroll

2 Answers2