WIP

src/js/app.js

@@ -1,13 +1,16 @@
 const observer = new IntersectionObserver((entries) => {
     entries.forEach(entry => {
         if (entry.isIntersecting) {
-            entry.target.classList.add('visible');
+            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;