Intersection Observer working, elements disappear after fading in

Question

First post here, hoping to get some help and meet some awesome friends while I'm at it!

So I am working on my personal portfolio to get it to where I at least can get it posted online for job hunting but sadly having some issues.

The layout is a singular page portfolio, I would like to get the elements that are OVER my background image to fade in as you scroll, which I have accomplished. However, after they are completed fading in, they instantly disappear.

Has anyone else had this issue? Would I need to add a possible fadeOut option to my CSS as well to cope with the disappearing act that my elements, which are sectioned off, keep pulling on me?

I am also using Bootstrap as well!!!!!

Code posted below: CSS

h1 {
  font-size: 4rem;
}

h2, h3, h4, h5, h6 {
  font-size: 3em;
}

p {
  font-size: 1.5em;
}

hr {
  border-top: 5px dotted white;
}

body {
  background-image: linear-gradient(rgba(0, 0, 0, 0.5),
        rgba(0, 0, 0, 0.5)), url(https://i.pinimg.com/originals/16/5a/ca/165aca25ea0a632a7eddae4230003f17.jpg);
  background-repeat: no-repeat;
  background-attachment: fixed;
}

/* Header Section */

.nav {
  background-color: black;
}

.nav-link {
  font-weight: bold;
  color: #ffff;
}

.nav-link:hover {
  color: #ffff;
}

#header {
  padding-bottom: 50%;
  position: relative;
  height: 500px;
}

.row {
  padding-top: 0%;
}

.greeting {
  text-align: left;
  margin-bottom: 10%;
  padding: 5% 10% 50% 5%;
  font-family: "Archivo Black";
  color: #ffff;
}

.header1 {
  padding-top: 20%;
}

/* About Me Section */

#about-me {
  text-align: center;
  /*background-color: #222831;*/
  z-index: 1;
  padding: 0% 20% 5% 20%;
}

.about-header {
  color: #ffff;
  font-family: "Saira Semi Condensed";
  text-decoration: underline;
  font-style: italic;
}

.introduction {
  color: #ffff;
  font-family: "Saira Semi Condensed";
}

/* My Work Section */

.carousel-caption {
  background-color: black;
  font-weight: bold;
  font-family: "Archivo Black";
  color: #ffff;
}

#my-work {
  padding-bottom: 5%;
}

/* Qualifications */

.btn {
  margin: 2% 0% 2% 0%;
  color: black;
}

/*My Hobbies */

#my-hobbies {
  font-family: "Saira Semi Condensed";
  color: #ffff;
}

.hobby1 {
  padding: 3% 5% 3% 5%;
}
.hobbyp1 {
  padding-right: 3%;
}

.hobbyimg1 {
  float: right;
  width: 700px;
}

.hobby2 {
  padding: 3% 5% 3% 5%;
}

.hobbyp2 {
  padding: 20% 5% 5% 5%;
  float: right;
  text-align: right;
}

.hobbyimg2 {
  padding: 5% 5% 5% 3%;
  width: 750px;
}

.hobby3 {
  padding: 5% 5% 5% 5%;
}

.hobbyp3 {
  padding: 25% 5% 5% 5%;
}

.hobbyimg3 {
  width: 500px;
}

/* Animation */

.fade {
  animation: fadeIn ease 5s;
-webkit-animation: fadeIn ease 5s;
-moz-animation: fadeIn ease 5s;
-o-animation: fadeIn ease 5s;
-ms-animation: fadeIn ease 5s;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@-moz-keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}

@-webkit-keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}

@-o-keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}

@-ms-keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}

JavaScript

const sectionOne = document.querySelector('#header');
const sections = document.querySelectorAll('section');

const options = {
  root: null,
  threshold: 0,
  rootMargin: "250px"
};

const observer = new IntersectionObserver(function(entries, observer) {
entries.forEach(entry => {
  if (!entry.isIntersecting) {
    return;
  }

  entry.target.classList.toggle('fade');

  console.log(entry.target);

})
}, options);

sections.forEach(section => {
  observer.observe(section);
})

score 0 · Accepted Answer · answered Nov 21 '20 at 05:32

Does this work?

.fade {
  animation: fadeIn ease 5s forwards;
  -webkit-animation: fadeIn ease 5s forwards;
  -moz-animation: fadeIn ease 5s forwards;
  -o-animation: fadeIn ease 5s forwards;
  -ms-animation: fadeIn ease 5s forwards;
}

h/t Maintaining the final state at end of a CSS3 animation

Intersection Observer working, elements disappear after fading in

1 Answers1