I am trying to add a fade in and slide up feature to some of the content in the middle of my HTML page as I scroll down. Currently I am having issues with the fade in. I am trying to apply the fade-in to a paragraph and button tag and both of them have two classes. Their own class for styling and then a .fade-in class which applies the styles for the fade in. I am implementing the fade-in through JavaScript. At the moment though, after I applied the .fade-in styles, the content isn’t showing up on the page anymore because I set the fade-in to opacity 0. While I scroll down, the content should fade in due to the fade-in.appear class which has opacity 1 but still the content is not visible.

To do some troubleshooting, I swapped opacity transitions from .fade-in {} from 0 to 1 and from .fade-in.appear {} from 1 to 0. With this change, now content never fades out. So I have come to the conclusion that the animation never gets triggered. Also please note that I have checked the browser console for JavaScript errors and ran the files through the W3C validator for HTML files and found no errors.

Here is also the code from HTML, CSS, and JS files:

HTML:

<div class="first-section">
  <p class="our-story-text fade-in">
    We customize sneakers with a focus on timeless designs, local production, and responsibly sourced products.
  </p>
  <button onclick="navigateToAbout()" class="story-button fade-in">Our Story</button>
</div>

CSS:

.our-story-text {
  font-family: 'Montserrat', sans-serif;
  display: block;
  font-size: 14px;
  text-align: center;
  padding: 50px;
  margin-top: 70px;
  background-color: rgb(242,239,227);
  width: 100%;
  max-width: 550px;
}

.story-button {
  font-family: 'Montserrat', sans-serif;
  background-color: rgb(242,239,227);
  display: block;
  color: black;
  height: 66px;
  width: 200px;
  border-width: 2px;
  border-color: black;
  font-weight: 550;
  margin-top: -28px;
}

.story-button:hover {
  cursor: pointer;
  color: rgb(242,239,227);
  background-color: black;
}

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

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

@media (max-width: 600px) {
  .our-story-text {
    background-color: rgb(242,239,227);
    margin-top: -10px;
    max-width: 85%;
  }

  .story-button {
    margin-top: 0px;
    height: 59px;
    width: 300px;
  }
}

JavaScript:

function navigateToAbout() {
  window.location.href = 'about.html';
}

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);
});