Merge pull request #332 from statikbe/KarelJanVanHaute/issue304

Stop the Intersection Observer in scrollAnimation when the element intersection is finished
statikbe · May 16, 2024 · 0907e0f · 0907e0f
2 parents 7eb4704 + f4a37ce
commit 0907e0f
Showing 1 changed file with 20 additions and 7 deletions.
diff --git a/tailoff/js/components/scrollAnimation.component.ts b/tailoff/js/components/scrollAnimation.component.ts
@@ -1,23 +1,26 @@
-import { DOMHelper } from '../utils/domHelper';
+import { DOMHelper } from "../utils/domHelper";
 
 export class ScrollAnimationComponent {
-  private rootMargin = '-50px';
+  private rootMargin = "-50px";
   private scrollDelay = 200;
 
   constructor() {
     const _self = this;
-    window.addEventListener('load', function () {
+    window.addEventListener("load", function () {
       const scrollObserver = new IntersectionObserver(
         (entries, observer) => {
           let delayIndex = 0;
           entries.forEach((entry, i) => {
             if (entry.isIntersecting) {
               const el = entry.target as HTMLElement;
-              el.classList.add('scrolled');
-              if (el.classList.contains('scroll-delay')) {
-                el.style.transitionDelay = `${_self.scrollDelay * delayIndex}ms`;
+              el.classList.add("scrolled");
+              if (el.classList.contains("scroll-delay")) {
+                el.style.transitionDelay = `${
+                  _self.scrollDelay * delayIndex
+                }ms`;
                 delayIndex++;
               }
+              observer.unobserve(el);
             }
           });
         },
@@ -26,10 +29,20 @@ export class ScrollAnimationComponent {
         }
       );
 
-      const scrollAnimationElements = document.querySelectorAll('.scroll-ani');
+      const scrollAnimationElements = document.querySelectorAll(".scroll-ani");
       Array.from(scrollAnimationElements).forEach((el) => {
         scrollObserver.observe(el);
       });
+
+      DOMHelper.onDynamicContent(
+        document.documentElement,
+        ".scroll-ani",
+        (scrollAnimationElements) => {
+          scrollAnimationElements.forEach((el) => {
+            scrollObserver.observe(el);
+          });
+        }
+      );
     });
   }
 }