WIP

dist/app.css

@@ -12064,7 +12064,7 @@ a {
 
 .watch-vp {
   opacity: 0;
-  transition: opacity 0.3s ease;
+  transition: opacity 0.75s ease;
 }
 .watch-vp.visible {
   opacity: 1;

dist/app.js

@@ -10,13 +10,16 @@
 var observer = new IntersectionObserver(function (entries) {
   entries.forEach(function (entry) {
     if (entry.isIntersecting) {
+      entry.target._inViewportTimeout = setTimeout(function () {
         entry.target.classList.add('visible');
+      }, 250);
     } else {
+      clearTimeout(entry.target._inViewportTimeout);
       entry.target.classList.remove('visible');
     }
   });
 }, {
-  threshold: 0.1 // adjust as needed
+  threshold: 0.5 // adjust as needed
 });
 document.querySelectorAll('.watch-vp').forEach(function (el) {
   observer.observe(el);

dist/mix-manifest.json

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

src/js/app.js

@@ -1,13 +1,16 @@
 const observer = new IntersectionObserver((entries) => {
     entries.forEach(entry => {
         if (entry.isIntersecting) {
+            entry.target._inViewportTimeout = setTimeout(() => {
                 entry.target.classList.add('visible');
+            }, 250);
         } else {
+            clearTimeout(entry.target._inViewportTimeout);
             entry.target.classList.remove('visible');
         }
     });
 }, {
-    threshold: 0.1 // adjust as needed
+    threshold: 0.5 // adjust as needed
 });
 
 document.querySelectorAll('.watch-vp').forEach(el => {

src/scss/_variables.scss

@@ -10,6 +10,7 @@ $c-tan: #B9AF78;
 $c-textGrey: #333333;
 
 $transition-time: 0.3s;
+$transition-time-slow: 0.75s;
 
 // Bootstrap overrides
 $font-family-sans-serif: 'Inter', sans-serif;

src/scss/global.scss

@@ -43,7 +43,7 @@ a {
 
 .watch-vp {
     opacity: 0;
-    transition: opacity $transition-time ease;
+    transition: opacity $transition-time-slow ease;
 
     &.visible {
         opacity: 1;