WIP

dist/app.js

@@ -9,10 +9,18 @@
 
 var observer = new IntersectionObserver(function (entries) {
   entries.forEach(function (entry) {
+    var el = entry.target;
     if (entry.isIntersecting) {
-      entry.target._inViewportTimeout = setTimeout(function () {
+      if (!el._hasEnteredOnce) {
-        entry.target.classList.add('visible');
+        // First time in viewport – apply delay
-      }, 250);
+        el._inViewportTimeout = setTimeout(function () {
+          el.classList.add('in-viewport');
+          el._hasEnteredOnce = true;
+        }, 250);
+      } else {
+        // Already entered once – no delay
+        el.classList.add('in-viewport');
+      }
     } else {
       clearTimeout(entry.target._inViewportTimeout);
       entry.target.classList.remove('visible');

dist/mix-manifest.json

@@ -1,4 +1,4 @@
 {
-    "/app.js": "/app.js?id=d57b699e31f5b30c10b0526be11ef90e",
+    "/app.js": "/app.js?id=1ee81514d6f716b07c2577c67a03a68a",
     "/app.css": "/app.css?id=5e173ee1f8a497d5c9ffa2042c32bba5"
 }

src/js/app.js

@@ -1,9 +1,18 @@
 const observer = new IntersectionObserver((entries) => {
     entries.forEach(entry => {
+        const el = entry.target;
+
         if (entry.isIntersecting) {
-            entry.target._inViewportTimeout = setTimeout(() => {
+            if (!el._hasEnteredOnce) {
-                entry.target.classList.add('visible');
+                // First time in viewport – apply delay
-            }, 250);
+                el._inViewportTimeout = setTimeout(() => {
+                    el.classList.add('in-viewport');
+                    el._hasEnteredOnce = true;
+                }, 250);
+            } else {
+                // Already entered once – no delay
+                el.classList.add('in-viewport');
+            }
         } else {
             clearTimeout(entry.target._inViewportTimeout);
             entry.target.classList.remove('visible');