intersection observer

i added a lot of elements and functions using intersection observers

Author: jorgennonstad

script.js

@@ -1,45 +1,37 @@
-const faders = document.querySelectorAll(".scene-text-conteiner");
-
-const appearOptions = {};
-
-const appearOnScroll = new IntersectionObserver(function (
-  entries,
-  appearOnScroll
-) {
-  entries.forEach((entry) => {
-    if (!entry.isIntersecting) {
-      return;
-    } else {
-      entry.target.classList.add("appear");
-      appearOnScroll.unobserve(entry.target);
+// Observer for .scene-text-container
+const textObserver = new IntersectionObserver(function(entries, observer) {
+  entries.forEach(entry => {
+    if (entry.isIntersecting && !entry.target.classList.contains('showTextAnimation')) {
+      entry.target.classList.add('showTextAnimation');
     }
   });
-},
-appearOptions);
+}, { threshold: 0.3 });
 
-faders.forEach((fader) => {
-  appearOnScroll.observe(fader);
+// Observer for .background-plants-right
+const plantObserverRight = new IntersectionObserver(function(entries, observer) {
+  entries.forEach(entry => {
+    if (entry.isIntersecting && !entry.target.classList.contains('showPlantRightAnimation')) {
+      entry.target.classList.add('showPlantRightAnimation');
+    }
+  });
 });
 
-const coral = document.querySelectorAll(".scene2-pink-coral");
-
-const coralOptions = {};
-
-const appearOnScroll = new IntersectionObserver(function (
-  entries,
-  appearOnScroll
-) {
-  entries.forEach((entry) => {
-    if (!entry.isIntersecting) {
-      return;
-    } else {
-      entry.target.classList.add("left-animation");
-      appearOnScroll.unobserve(entry.target);
+// Observer for .background-plants-left
+const plantObserverLeft = new IntersectionObserver(function(entries, observer) {
+  entries.forEach(entry => {
+    if (entry.isIntersecting && !entry.target.classList.contains('showPlantLeftAnimation')) {
+      entry.target.classList.add('showPlantLeftAnimation');
     }
   });
-},
-appearOptions);
-
-faders.forEach((fader) => {
-  appearOnScroll.observe(fader);
 });
+
+// Elements to observe
+const textElements = document.querySelectorAll('.scene-text-conteiner');
+const plantElementsRight = document.querySelectorAll('.background-plants-right');
+const plantElementsleft = document.querySelectorAll('.background-plants-left');
+const h3Element = document.querySelector('h3');
+
+// Add observers to elements
+textElements.forEach(el => textObserver.observe(el));
+plantElementsRight.forEach(el => plantObserverRight.observe(el));
+plantElementsleft.forEach(el => plantObserverLeft.observe(el));