Problem and intersection observe how to make the code run at each element?

Question

I have a problem all works but the animation code is executed as soon as an element is detected, all the animations are already made while they are not yet in the screen, it does not appear according to their visibility. how to restore the order in this code and not that it executes all the animations as soon as it crosses one of the elements. here is my components

<template>
  <div class="bg-white">
    <div>
      <div class="  d-flex justify-content-center align-items-center">
        <h2 id="objectif" class="texte invisible py-5">Mes Objectifs</h2>
      </div>

      <div
        class="d-flex flex-column justify-content-center paragraphe bg-secondary"
      >
        <h3 class="invisible paratop1 text-white ">
          " Aime développer produire dans le web rester connecté à la
          technologie. "
        </h3>
        <h3 class="invisible paratop2 text-white">
          " Vous rendre de la qualité , du travail bien fait , un service
          optimiser. "
        </h3>
      </div>
    </div>
    <div>
      <Competences />
    </div>
    <div class="mb-5">
      <div class="d-flex justify-content-center align-items-center">
        <h2
          class="d-flex justify-content-center align-items-center rounded-pill text-pop-up-top text-white my-5"
        >
          Quelles sont mes offres ?
        </h2>
      </div>
      <div class="bg-secondary paragraphe">
        <h5 class="text-white pt-5">
          <ul class="para1">
            <li>
              - Vous avez un projet : création de plate-forme e-commerce
            </li>
            <br />
            <li>
              - Vous révez d'avoir votre propre réseau social et marquer
              l'histoire
            </li>
            <br />
            <li>
              - Vous aspirez à faire valoir votre savoir-faire
            </li>
            <br />
            <li>
              - Vous voulez dévelloper votre entreprise
            </li>
            <br />
            <li>
              - Où simplement afficher votre présence dan le monde digitale
            </li>
          </ul>
        </h5>
        <h4 class="para2 text-white pt-5">
          Mes services correspondront donc peut être à ce que vous avez peut
          être toujours chercher !
        </h4>
      </div>
    </div>
    <div class="d-flex justify-content-center align-items-center">
      <h2 class="boxt mb-0 pb-5 pt-5">Mes projets</h2>
    </div>
    <div>
      <Carte />
    </div>
  </div>
</template>

<script>
import Competences from "./competences.vue";
import Carte from "./carte.vue";
export default {
  name: "contenu",
  components: {
    Competences,
    Carte,
  },
  mounted() {
    let observer = new IntersectionObserver(function(observables) {
      observables.forEach(function(observable) {
        // L'élément devient visible
        if (observable.intersectionRatio > 0.9) {
          console.log(observables);
        }
      });
    });
    let objectifs = document.querySelectorAll("#objectif");
    objectifs.forEach(function(objectif) {
      observer.observe(objectif);
      objectif.classList.remove("invisible");
      objectif.classList.add("boxt");
    });
    let para11 = document.querySelectorAll(".paratop1");
    para11.forEach(function(para1) {
      observer.observe(para1);
      para1.classList.remove("invisible");
      para1.classList.add("para1");
    });
    let para22 = document.querySelectorAll(".paratop2");
    para22.forEach(function(para2) {
      observer.observe(para2);
      para2.classList.remove("invisible");
      para2.classList.add("para2");
    });
    /*
    const objectif = document.getElementById("objectif");
    const paratop1 = document.querySelector(".paratop1");
    const paratop2 = document.querySelector(".paratop2");

    window.addEventListener("scroll", () => {
      if (window.scrollY > 100) {
        objectif.classList.remove("invisible");
        objectif.classList.add("boxt");
        console.log("scroll");
      }
      if (window.scrollY > 200) {
        paratop1.classList.remove("invisible");
        paratop2.classList.remove("invisible");
        paratop1.classList.add("para1");
        paratop2.classList.add("para2");
        console.log("scroll");
      }
    });
    */
  },
};
</script>

<style lang="scss">
.boxt {
  animation: 1s linear boxt;
}
.boxb {
  animation: 1s linear boxb;
}
.para1 {
  animation: 1s linear para1;
}
.para2 {
  animation: 1s linear para2;
}
@keyframes boxt {
  0% {
    opacity: 0;
    transform: translateX(200%);
  }
  100% {
    opacity: 1;
  }
}
@keyframes boxb {
  0% {
    opacity: 0;
    transform: translateX(-200%);
  }
  100% {
    opacity: 1;
  }
}
@keyframes para1 {
  0% {
    opacity: 0;
    transform: translateY(-200%);
  }
  100% {
    visibility: hidden;
    opacity: 1;
  }
}
@keyframes para2 {
  0% {
    opacity: 0;
    transform: translateY(200%);
  }
  100% {
    visibility: hidden;
    opacity: 1;
  }
}
.text-pop-up-top {
  height: 60px;
  width: 15em;
  background-color: #aca5a5;
  animation: text-shadow-pop-top 0.6s both;
}
@keyframes text-shadow-pop-top {
  0% {
    text-shadow: 0 0 #555555, 0 0 #555555, 0 0 #555555, 0 0 #555555, 0 0 #555555,
      0 0 #555555, 0 0 #555555, 0 0 #555555;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  100% {
    text-shadow: 0 -1px #555555, 0 -2px #555555, 0 -3px #555555, 0 -4px #555555,
      0 -5px #555555, 0 -6px #555555, 0 -7px #555555, 0 -8px #555555;
    -webkit-transform: translateY(8px);
    transform: translateY(8px);
  }
}
</style>

Answer 1

You're looping throug your elements and immediately removing/adding the classes that handle the animation; So, you're showing all your elements regardless of the intersectionOberserver.

Don't manage your classes when looping the elements but within the observer callback function

objectifs.forEach(function(objectif) {
  observer.observe(objectif);

  // Apply the observer but don't manage the classes here
  // objectif.classList.remove("invisible");
  // objectif.classList.add("boxt");
});

---

let observer = new IntersectionObserver(function(observables) {
  observables.forEach(function(observable) {
    // L'élément devient visible
    if (observable.intersectionRatio > 0.9) {
      const element = observable.target;

      element.classList.remove("invisible");
      element.classList.add("boxt");
    }
  });
});

---

Now, you need to pass different classes for different items. Instead of setting different oberservers or callbacks, I (personally) would do it by storing the class name as data-visibleClass property on HTML elements.

<h2 id="objectif" class="texte invisible py-5" data-visibleClass="boxt">Mes Objectifs</h2>

Then, access to it from the observer callback

let observer = new IntersectionObserver(function(observables) {
  observables.forEach(function(observable) {
    // L'élément devient visible
    if (observable.intersectionRatio > 0.9) {
      const element = observable.target;
      const visible = element.dataset.visibleClass;

      element.classList.remove("invisible");
      element.classList.add(visible);
    }
  });
});

---

Learn more here: Intersection Observer API | MDN

Answer 2

they appear with dataset element by element but the animations do not start they do not work the sentences simply reappear , and the class appear undefind in html class what's solution is for animations ?

<template>
  <div class="bg-white">
    <div>
      <div class="  d-flex justify-content-center align-items-center">
        <h2 id="objectif" class="invisible py-5" data-visibleClass="boxt">
          Mes Objectifs
        </h2>
      </div>

      <div
        class="d-flex flex-column justify-content-center paragraphe bg-secondary"
      >
        <h3 class="invisible paratop1 text-white " data-visibleClass="para1">
          " Aime développer produire dans le web rester connecté à la
          technologie. "
        </h3>
        <h3 class="invisible paratop2 text-white" data-visibleClass="para2">
          " Vous rendre de la qualité , du travail bien fait , un service
          optimiser. "
        </h3>
      </div>
    </div>
    <div>
      <Competences />
    </div>
    <div class="mb-5">
      <div class="d-flex justify-content-center align-items-center">
        <h2
          id="textPop"
          class="d-flex justify-content-center align-items-center rounded-pill invisible text-white my-5"
        >
          Quelles sont mes offres ?
        </h2>
      </div>
      <div class="bg-secondary paragraphe">
        <h5 class="text-white pt-5">
          <ul id="liste" class="invisible">
            <li>
              - Vous avez un projet : création de plate-forme e-commerce
            </li>
            <br />
            <li>
              - Vous révez d'avoir votre propre réseau social et marquer
              l'histoire
            </li>
            <br />
            <li>
              - Vous aspirez à faire valoir votre savoir-faire
            </li>
            <br />
            <li>
              - Vous voulez dévelloper votre entreprise
            </li>
            <br />
            <li>
              - Où simplement afficher votre présence dan le monde digitale
            </li>
          </ul>
        </h5>
        <h4 id="liste2" class="invisible text-white pt-5">
          Mes services correspondront donc peut être à ce que vous avez peut
          être toujours chercher !
        </h4>
      </div>
    </div>
    <div class="d-flex justify-content-center align-items-center">
      <h2 class="boxt mb-0 pb-5 pt-5">Mes projets</h2>
    </div>
    <div>
      <Carte />
    </div>
  </div>
</template>

<script>
import Competences from "./competences.vue";
import Carte from "./carte.vue";
export default {
  name: "contenu",
  components: {
    Competences,
    Carte,
  },
  mounted() {
    let observer = new IntersectionObserver(
      function(observables) {
        observables.forEach(function(observable) {
          // L'élément devient visible
          if (observable.intersectionRatio > 0.9) {
            const element = observable.target;

            element.classList.remove("invisible");
            const visible = element.dataset.visibleClass;
            element.classList.add(visible);
          }
        });
      },
      {
        threshold: [0.9],
      }
    );
    let objectifs = document.querySelectorAll("#objectif");
    objectifs.forEach(function(objectif) {
      observer.observe(objectif);
      //objectif.classList.remove("invisible");
      //objectif.classList.add("boxt");
    });

    let para11 = document.querySelectorAll(".paratop1");
    para11.forEach(function(para1) {
      observer.observe(para1);
      //para1.classList.remove("invisible");
      //para1.classList.add("para1");
    });
    let para22 = document.querySelectorAll(".paratop2");
    para22.forEach(function(para2) {
      observer.observe(para2);
      //para2.classList.remove("invisible");
      //para2.classList.add("para2");
    });

    /*
    const objectif = document.getElementById("objectif");
    const paratop1 = document.querySelector(".paratop1");
    const paratop2 = document.querySelector(".paratop2");
    const textPop = document.getElementById("textPop");
    const liste = document.getElementById("liste");
    const liste2 = document.getElementById("liste2");

    window.addEventListener("scroll", () => {
      if (window.scrollY >= 0) {
        console.log(window.scrollY);
      }
      if (window.scrollY > 100) {
        objectif.classList.remove("invisible");
        objectif.classList.add("boxt");
      }
      if (window.scrollY > 200) {
        paratop1.classList.remove("invisible");
        paratop2.classList.remove("invisible");
        paratop1.classList.add("para1");
        paratop2.classList.add("para2");
      }
      if (window.scrollY > 1400) {
        textPop.classList.remove("invisible");
        textPop.classList.add("text-pop-up-top");
      }
      if (window.scrollY > 1550) {
        liste.classList.remove("invisible");
        liste.classList.add("para1");
      }
      if (window.scrollY > 1700) {
        liste2.classList.remove("invisible");
        liste2.classList.add("para2");
      }
    });
    */
  },
};
</script>

<style lang="scss">
.boxt {
  animation: 1.5s linear boxt;
}
.boxb {
  animation: 1s linear boxb;
}
.para1 {
  animation: 1.5s linear para1;
}
.para2 {
  animation: 1.5s linear para2;
}
@keyframes boxt {
  0% {
    opacity: 0;
    transform: translateX(200%);
  }
  100% {
    opacity: 1;
  }
}
@keyframes boxb {
  0% {
    opacity: 0;
    transform: translateX(-200%);
  }
  100% {
    opacity: 1;
  }
}
@keyframes para1 {
  0% {
    opacity: 0;
    transform: translateY(-200%);
  }
  100% {
    visibility: hidden;
    opacity: 1;
  }
}
@keyframes para2 {
  0% {
    opacity: 0;
    transform: translateY(200%);
  }
  100% {
    visibility: hidden;
    opacity: 1;
  }
}
.text-pop-up-top {
  height: 60px;
  width: 15em;
  background-color: #aca5a5;
  animation: text-shadow-pop-top 0.6s both;
}
@keyframes text-shadow-pop-top {
  0% {
    text-shadow: 0 0 #555555, 0 0 #555555, 0 0 #555555, 0 0 #555555, 0 0 #555555,
      0 0 #555555, 0 0 #555555, 0 0 #555555;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  100% {
    text-shadow: 0 -1px #555555, 0 -2px #555555, 0 -3px #555555, 0 -4px #555555,
      0 -5px #555555, 0 -6px #555555, 0 -7px #555555, 0 -8px #555555;
    -webkit-transform: translateY(8px);
    transform: translateY(8px);
  }
}
</style>

Answer 3

hello i'm use bootstrap here document class of invisible and visible class

<div class="visible">...</div>
<div class="invisible">...</div>  // Class
.visible {
  visibility: visible;
}
.invisible {
  visibility: hidden;
}

// Usage as a mixin
.element {
  @include invisible(visible);
}
.element {
  @include invisible(hidden);
}